CSS for Containers? + !important declaration question

[Alan Vende]

Forum URL: psychic-psyghtings.proboards.com

I'm attempting to make a custom page from scratch with code. I'm finding that I will have to put in the code for a container right into the page. I was wondering if someone could please provide it, as I cannot seem to find the CSS in the Style Sheet.

Also, does the !important work in the Custom Page HTML area? I attempted to put it in there because my color declaration doesn't seem to be taking effect. When I put the name attribute on them so I could make a Table of Contents, it changed colors to the link color for the forum, which is what I expected it to do. When I attempted to change it, it didn't render correctly, so I put the !important declaration in there thinking that it would override anything else and put that, but it didn't.

I feel like I'm venturing into territory that the Custom Page cannot do... I just wanted to ask before I spent too much time on this. I've already spent three hours already.

Thank you for your help!

[Scott]

Alan Vende ,

Put this as the beginning html:

<div class="container">
   <div class="title-bar">
       <h2>YOUR TITLE HERE</h2></div>
 <div class="content">

PLACE YOUR PAGE CONTENT HERE

 </div>
</div>

Make sure you place the closing 2 divs at the very bottom of the page.  Using this structure with the classes should automatically pull in the css and match the rest of the forum.


Hope this makes sense.

EDIT: I hope I've understood your post properly too. and yes !important should work there the same as elsewhere.

[Alan Vende]

Oct 14, 2016 15:46:20 GMT -8 Scott said:

Alan Vende ,

Put this as the beginning html:

<div class="container">
   <div class="title-bar">
       <h2>YOUR TITLE HERE</h2></div>
 <div class="content">

PLACE YOUR PAGE CONTENT HERE

 </div>
</div>

Make sure you place the closing 2 divs at the very bottom of the page.  Using this structure with the classes should automatically pull in the css and match the rest of the forum.


Hope this makes sense.

There's only one container at the top of my page that I want to adopt the CSS for the container/title bar, and that's the TOC. This is the same page I asked about earlier. I went with coding the page completely through the HTML page.

An example of something that I put in, but isn't rendering: The margin-top and margin-bottom to make it so the various elements didn't touch like they are now. They're still in there, and from what I can tell, are written correctly, but they're not rendering on the page correctly.

I attempted to put in the coding that you gave me above, but it put a container around everything. The only time I would like a container is around the individual pieces of content, not the whole thing. Does that make sense?

[Scott]

Alan Vende I apologize I don't have time to review it this evening as I'm about to head out. I'll be more than happy to continue this in the morning when I'm back in, if you still need the help.

[Alan Vende]

Oct 14, 2016 16:01:05 GMT -8 Scott said:

Alan Vende I apologize I don't have time to review it this evening as I'm about to head out. I'll be more than happy to continue this in the morning when I'm back in, if you still need the help.

Thank you so much, Scott. I attempted to fix it by changing around classes and things, but I think I just made it worse.

Thank you again, Scott! Have a great night!

[Kami]

Alan Vende - can you link to the custom page please? (:

[Alan Vende]

Oct 14, 2016 17:03:06 GMT -8 Kami said:

Alan Vende - can you link to the custom page please? (:

Ack. Sorry, Kami. Thank you for asking. I didn't realize I didn't. My apologies!

The custom page is here.

[Kami]

OK so, regarding links, my suggestion for you if you want them a different colour from the rest of the links on your forum / that theme, is to give the links a unique class, eg: "reiki-links"

So the HTML would then read: <a href="linkhere" class="reiki-links">link text</a>

And the CSS that would follow would be:

a.reiki-links {
your css here
}

That will eliminate the need to fiddle around with !important declarations (which don't function how you think they do, hopefully these links will help: info 1, info 2) and instead give the links their own unique class, which is a cleaner method at any rate. While !important has a place, you should generally try and see if there's another way to write the CSS because you'll wind up declaring everything as !important which makes actually setting the hierarchy of what appearance each element takes that much more difficult.

Regarding the margins: could you clarify? Are we still talking about the TOC? If so, I am not seeing any of the elements touching, so seeing what you see would be beneficial (screenshot, in other words).

[Alan Vende]

I attempted to do what you're saying with the links. I attempted that before I opened this thread. My apologies on that. I had deleted it so it wouldn't hurt anything. I should have commented it out and kept it there, in hindsight.

Wouldn't the CSS be reiki-links a? That's how I've seen it, anyway. I'm guessing it would work both ways?

In regards to the margins: The top piece is supposed to be separate from the one below it. I got it to work once, but now it doesn't (I didn't change anything with that, either. I think when maneuvering the classes and such it changed it and made it not work because I didn't change the classes. I went back to look through the code, though, and couldn't find anything amiss.

The screenshot:



Also, the TOC and the first box are further away than 10px, but I can't change it, even when I change the code that affects it...



I'm not sure if these two issues in the screenshots are somehow related.

EDIT: This is the first thread I had on this subject, and this is the second. They were created earlier today, and kind of lead to this thread.

[Kami]

The order of the syntax is important, if subtle; a.class looks for a link with the designated class present (in this case, it is looking for links with the class 'reiki-links'). .class a looks for a link that is a child of the aforementioned class. Because 'reiki-links' is not the class of the element that the links are contained in, a.reiki-links would be the correct syntax. If the <div> had the class 'reiki-links', the CSS would read .reiki-links a. Hopefully that makes sense.

Let's finish dealing with the links CSS first before tackling the margins, now that I think of it. If you could copy & paste (if it's long, please use the 'spoiler' tags) the CSS you're using to style the reiki toc links, and the HTML you're using to format said links, I'd appreciate it. (:

[Alan Vende]

I never knew there was a difference. I always wrote it as class a. Thank you for telling me the difference.

It is kind of long. It's kind of all over the place. I will show you the whole thing, because somewhere something fluffed up. The page is now showing comments. I commented it out correctly (I was in a CSS styling, so I thought to use CSS comments.)



This is at the bottom of the page now. It should be commented out.

SPOILER: Click to show

/* Begin Div Title and Position CSS */
<style>
.Reiki-TOC, .General-Questions-Reiki, .Usui-Reiki-I, .Usui-Reiki-II {
color: #ffffff;
margin-bottom: 10px;
}
</style>
/* End Div Title and Position CSS */

and

SPOILER: Click to show

<style>
/* TOC CSS */
.TOC-Contents {
text-align: center;
}
</style>

[Kami]

OK so first, there's absolutely no reason not to put the following styles in your style sheet (minus the tags of course). Keep things nice and neat instead of having bits of CSS all over the place.

Second, is this the CSS you're using for the links? Because they styles you have shown do not specify links.


EDIT: The reason that text is showing is because you're using CSS commenting outside of the <style></style> tags, it should be <!-- Html Comments -->

EDIT 2: OK so after looking at your view source I have to say, in the nicest way possible, that your HTML & CSS are a mess. ;x You've got multiple <style></style> tags when quite honestly only one would do (and honestly like I said, you could just put it in your stylesheet, that way you can adjust the colours for all your themes), and you've got CSS and HTML all jumbled up together. You've also duplicated CSS and I don't really understand why. I'm trying to sort through it but it's going to take some time.

EDIT 3: There's also duplicated js. You do not need to duplicate the js every single time you have a new section for this particular code. None of the variables the js uses actually change between sections, so one instance is enough.

EDIT 4: Phew. I think I've done what you're trying to accomplish! Here is the link to my test site where I fixed the CSS & HTML up for you - kamitest4.proboards.com/page/reiki-test

If this is what you want, let me know and I'll give you the revised coding. You may notice that the accordion buttons are a little smaller in height than on your page -- that was my doing. I can revert it if you'd like, but I felt this was less overwhelming. If you need me to change anything else (margins, colours, etc), let me know (: Also I couldn't tell if you wanted a space between accordion slider options, or just between the categories, so I did both. Easy enough to fix if you don't want margins in one of those spots (or either).

[Alan Vende]

Oct 14, 2016 19:25:52 GMT -8 Kami said:

OK so first, there's absolutely no reason not to put the following styles in your style sheet (minus the tags of course). Keep things nice and neat instead of having bits of CSS all over the place.

Second, is this the CSS you're using for the links? Because they styles you have shown do not specify links.


EDIT: The reason that text is showing is because you're using CSS commenting outside of the <style></style> tags, it should be <!-- Html Comments -->

EDIT 2: OK so after looking at your view source I have to say, in the nicest way possible, that your HTML & CSS are a mess. ;x You've got multiple <style></style> tags when quite honestly only one would do (and honestly like I said, you could just put it in your stylesheet, that way you can adjust the colours for all your themes), and you've got CSS and HTML all jumbled up together. You've also duplicated CSS and I don't really understand why. I'm trying to sort through it but it's going to take some time.

EDIT 3: There's also duplicated js. You do not need to duplicate the js every single time you have a new section for this particular code. None of the variables the js uses actually change between sections, so one instance is enough.

EDIT 4: Phew. I think I've done what you're trying to accomplish! Here is the link to my test site where I fixed the CSS & HTML up for you - kamitest4.proboards.com/page/reiki-test

If this is what you want, let me know and I'll give you the revised coding. You may notice that the accordion buttons are a little smaller in height than on your page -- that was my doing. I can revert it if you'd like, but I felt this was less overwhelming. If you need me to change anything else (margins, colours, etc), let me know (: Also I couldn't tell if you wanted a space between accordion slider options, or just between the categories, so I did both. Easy enough to fix if you don't want margins in one of those spots (or either).

When I was writing it, I thought it was different (for some reason. I don't know the reason) so I put the code separately and not together. I don't know why I thought it would be better organizationally if I put the different instances separately. I'm realizing that if and when I code, I should take time to sit back and remember to put all HTML together, all CSS together and all JS together, not sporadically placed like I did on the page. When I gave it to you, I didn't specify an a anywhere. No wonder it didn't work... (There's a duh moment!...)

When I first wrote the code, my thought was, "I don't want it in the Style Sheet because it would go on the whole forum, and not on the page itself. This is the first time I've ever coded a page straight from CSS, so I'm learning. Thank you for telling me that it can go into the Style Sheet. I didn't think of that. Whoops, no, that's not the CSS for the links. When I coded this, I coded it horribly. I'm not afraid to say that. It was my first time coding a page, and when I was writing it, the reason why I have different pieces there, is because I thought that they were different. It didn't occur to me that I could put them all together under the same CSS... but, I can because that would just be one instance of CSS, like in a stylesheet, right? Kind of like the JS - it only has to be there once. There doesn't have to be more than one instance of CSS either, right? I forgot I could put it at the bottom of the page and it would still effect all of them. I wasn't thinking straight when I coded this, I guess. :x

This was also my first time working with accordion code, so it was a learning curve for me... a big one at that!

In regards to your edits:

• EDIT: I realize that now. I thought for some reason to use the comments that go with the code instead of using HTML comments for everything. I thought that if I did, it would show on the page. So, when using comments on an HTML page, the only comments that will work are HTML comments. I thought that the comments had to be what they are for the code (HTML comments for HTML, CSS comments for CSS, JS comments for JS.)
  
  
• EDIT 2: I have a handful of themes, which is why I thought about putting it into the page itself. I either thought of the page itself, or the Global Header so I would only have to put the code for the page once, and not on each individual Style Sheet.
  
  
• EDIT 3: It's my first time I've ever worked with JS for an extended period of time. I thought that if you wanted to have multiple of something, like an accordion for example, on a page, that you had to put more than one instance on the page, like I did.
  
  
• EDIT 4: That is exactly what I would like, thank you! Thank you so much for your help, Kami . When I was coding it on my page, I did think that the accordions were a bit large, but I didn't know how to make them smaller, so I thought that I would have to live with it.
  

Also, should I change the styling of the first box to match the rest of them? That was another thing that I thought of when I was looking at your page... so the page is uniform to itself, not the forum. When I coded the page, the reason why I have purple as the backgrounds of each of them is because purple represents knowledge/wisdom and when you're learning Reiki that's what you're getting - knowledge of Reiki (history, how to pass on the attunements and so on.)

---

Seeing it on your page raised a question in my mind: If I want the bottom of the last accordion to be away from the ads, should I put a margin-bottom: #; onto the last accordion?

Also, another question was raised in my mind when I was looking at your page: Would it be possible to put expand/collapse all links on the various accordions so it would expand/collapse all of the questions in that section? I looked on W3Schools (that's actually where I got the Accordion code,) but I cannot find anything to that effect. But just because I don't find it there doesn't mean that it's not possible, right?

Thank you again, Kami !

PS: My apologies for the late response. I didn't see your response until now. I had to put my computer away because it was getting hot, and Tapatalk never alerted me to your response.

[Scott]

Just a comment regarding CSS placement. You were correct Alan Vende, if you have multiple themes and the additional CSS is for the custom page only, then placing it on the custom page would save you from having to insert it in the CSS of every theme and then remembering to adjust them all if you make a change.

[Alan Vende]

Oct 15, 2016 9:47:20 GMT -8 Scott said:

Just a comment regarding CSS placement. You were correct Alan Vende , if you have multiple themes and the additional CSS is for the custom page only, then placing it on the custom page would save you from having to insert it in the CSS of every theme and then remembering to adjust them all if you make a change.

I just wanted to confirm my thinking on that. Thanks so much, Scott !

Kami: I didn't mean to make it sound like I was contradicting you. I was just wanting to make sure I understood. My apologies if it sounded like I was defensive/confrontational.