Example to compare styling properties with extra.css

[Neil E.]

Goal: to change nodeIcon margins. A simple example that should be easy to follow.
Appearance>Styles>whateverstyle>Style Property Groups>Style Properties: Node Icons>Node Icon
Look at property margin, default value: 10px 0px 10px 10px
Change to: 9px 10px 9px 10px (can be done in SP, our task is to use EXTRA)
Inspect element with Firebug as per attached image.



The element we want is in class nodeIcon. Under the style tab it is listed as .node .nodeIcon
To style this icon in EXTRA I would refer to it as .forum_list .node .nodeIcon
This should select all nodeIcons in the forum list and apply the margin change to them.

code:
.forum_list .node .nodeIcon
{
margin: 9px 10px 9px 10px !important;
}

And as usual: nothing happens!

Any ideas?

 

[Neil E.]

I take the same small block of code and move it from near the bottom of EXTRA to near the beginning of EXTRA and suddenly it works!

 

[Russ]

I take the same small block of code and move it from near the bottom of EXTRA to near the beginning of EXTRA and suddenly it works!

It could mean you have some broken CSS in the extra.css, I've had the same result before when I was doing 4AM coding, left out a } or a ;

 

[Neil E.]

I know what you mean. I failed to close a comment once and the results were really strange. By the time it hit the next comment close quite a bit of code was missed and it was easy to see something was wrong.

I just scrolled through every EXTRA entry and it all looks good. I have to expect it's something I'm doing wrong, but what it is still remains a mystery. I do my commenting slightly differently to highlight sections. I can't see how that would be an issue.

.node .forum.level_2,
.node .page.level_2,
.node .category_forum.level_2 /* */
{
    width: 50%;
    float: left;
    min-height: 56px;
}
/* ~create two column node list~ */

 

[CyberAP]

To prevent this I always split my css into different templates. So when something is broken I can easily find the broken template.

 

[Neil E.]

To prevent this I always split my css into different templates. So when something is broken I can easily find the broken template.

I don't know what you mean (EXTRA is only a single template). Can you show us a screenshot?

 

[Russ]

He likes to create multiple css templates:

http://xenforo.com/community/resour...beginners-best-practices-tips-and-tricks.975/

his guide there, also if you want you can feel free to PC me your extra.css, I can take a look for an error

 

[Neil E.]

Thanks for the link Russ. I like the idea that these templates are custom ones that won't be altered during an upgrade. Now we have a structure that provides a way to go down into the details in a more organized fashion. Thanks for the offer of looking at my EXTRA; I'll keep hacking away for now.

One thing that I noticed in some of Shelley's examples is that she breaks out element details fully. I just tried this myself and it made a big difference. Note how I first tried to adjust sectionMain:

.sectionMain
{
    border-all: none !important;
    border-radius: none !important;
    padding: 0px 0px 0px 0px !important;
}
/* ~nodeList area fills page~ */

This had no result. Broke it out more and it worked fine.

.sectionMain
{
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-radius: none !important;
    padding: 0px 0px 0px 0px !important;
}
/* ~nodeList area fills page~ */

This is very frustrating as both methods should achieve the same result.

I am getting closer to the opinion that styling properties should only be used as a last resort.

 

[Russ]

border-all isn't a css property, use border-width: 0px !important

or border: 1px solid #000000; for comined properties.

http://www.w3schools.com/css/css_border.asp

 

[Neil E.]

Oops you are correct. I had already deleted the code and just typed it in from memory. I'm pretty sure it was border: none that I tried.

 

[Neil E.]

Continuing on with this craziness. I want to reduce the bottom padding on the message area. This is the space between the public controls and the top of the next message. I can adjust this fine using StyleProperties>Message Layout>Message Container. The default value is padding bottom 30px. I want to reduce it to 10px via EXTRA.




Here is my code in EXTRA.

.messageList .message
{
border-top: 1px solid d7edfc !important;
padding-top; 10px !important;
padding-right; 0px !important;
padding-bottom; 10px !important;
padding-left; 0px !important;
}

There is no change after applying this as you can see in the style properties (from Firebug).



I have to assume I'm calling up the wrong class. The server error logs are empty. Can anyone point me in the right direction?

 

[gldtn]

.messageList .message {
    padding-bottom: 10px !important;
}

That should work just fine. You can see here >> http://d.pr/i/9Gf that the padding-bottom: 30px; gets overwritten just like it should.

In the end, I'm pretty sure you are going to agree that using style property is much easier. Do what you can on style property, and than fine tune what you need in the extra.css template. This will save you numerous lines of code and a lot of headaches. There are a bunch of missing style property to fully be able to do everything through there(more advance stuff), but for the basic stuff you can pretty much customize everything on xenforo.

If you try to jam everything in the extra.css template, your are bound to caos IMO. Splitting into several templates it's also a good idea like mentioned above. Here is what I have for a skin that I'm finishing up >> http://d.pr/i/anHk

Also, I assume you do understand the css precedence, correct? this will save you a lot of headaches as well, here is a good read >> http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Just my 2 cents

 

[Neil E.]

Thank you for looking at this. I tried the code exactly as you have it listed and wound up with no overwriting taking place. This is what really bugs me.

I disagree on SP as the way to go. I found it to be way too global for me. There should be no reason why I can't do everything with EXTRA (or new templates). I have read that css precedence article before and I will study the other one now. I added my EXTRA here; maybe something I'm doing wrong will be apparent to the experienced users. Finding even one mistake would help. This shouldn't be so tricky.

.sectionMain
{
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-radius: none !important;
    margin: 0px 0px 0px 0px !important;
    padding: 0px 0px 0px 0px !important;
}
/* ~nodeList area no border no margin no padding fills page~ */
 
 
 
.node .nodeLastPost
{
    background: none !important;
    background-image: none !important;
    border-width: none ! important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-radius: none !important;
    margin: 4px 6px 6px 4px !important;
    padding: 0px 0px 0px 0px 0px !important;
    height: 44px ! important;
    width: 120px !important;
}
/* ~define nodeLastPost size~ */
 
 
 
.node .forum.level_2,
.node .page.level_2,
.node .category_forum.level_2
{
    width: 50%;
    float: left;
    min-height: 56px;
}
/* ~create two column node list~ */
 
 
 
.nodeList .node.level_1
{
    clear: both;
    margin-top: 15px !important;
    margin-bottom: 0px !important;
    overflow: auto;
}
/* ~moves second category strip below first group, spaces margin down~ */
 
 
 
.nodeInfo, .forumNodeInfo primaryContent
{
    border-top: 1px solid #d7edfc !important;
    border-right: 1px solid #d7edfc !important;
    border-bottom: 1px solid #d7edfc !important;
    border-left: 1px solid #d7edfc !important;
    border-radius: 10px 10px 10px 10px !important;
    margin: 5px 5px 5px 5px !important;
}
/* ~adds border and margin to forum nodes~ */
 
 
 
.node .nodeControls
{
    position: absolute !important;
    top: 0px !important;
    right: 145px !important;
    margin: 36px 0px 0px 0px !important;
}
/* ~move tiny icon lower~ */
 
 
 
.node .tinyIcon
{
    margin: 0px 4px 0px 4px !important;
}
/* ~align tiny icon~ */
 
 
 
.node .nodeText
{
    margin: 0px 0px 0px 0px !important;
    height: 54px !important;
}
/* ~define text space~ */
 
 
 
.nodeList .categoryStrip
{
    border: 1px solid #e68c17 !important;
    border-radius: 5px 5px 5px 5px !important;
    padding: 2px 0px 2px 0px !important;
}
/* ~reduce the height and add radius~ */
 
 
 
.nodeList .categoryStrip .nodeTitle
{
    padding-left: 10px !important;
}
/* ~move title over~ */
 
 
 
.forum_list .node .nodeIcon
{
    margin: 9px 10px 9px 10px !important;
}
/* ~move node icon to the left~ */
 
 
 
.message .messageInfo
{
    margin-left: 10px !important;
    margin-right: 140px !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
}
/* ~removes primaryContent border and moves message to the left side~ */
 
 
 
.messageList .message
{
    padding-bottom; 10px !important;
}
/* ~reduce bottom padding to bring up pageNavLinkGroup~ */
 
 
 
.messageUserInfo
{
    float: right !important;
}
/* ~moves userbit to the right side~ */
 
 
 
.message .messageContent
{
    min-height: 170px !important;
}
/* ~reduce message height~ */
 
 
 
.message .privateControls
{
    margin-left: 10px;
}
/* ~move private controls more to the right~ */
 
 
 
.message .publicControls
{
    margin-right: 10px;
}
/* ~move public controls more to the left~ */
 
 
 
.message .signature
{
    border-top: 1px dashed #D7EDFC !important;
    border-bottom: 1px dashed #D7EDFC !important;
    font-size: 8pt !important;
    margin-top: 5px !important;
    padding: 0px 0px 0px 0px !important;
}
/* ~add bottom border to signature area~ */
 
 
 
.message .newIndicator
{
    margin: 0px 100px 0px 0px !important;
}
/* ~move the new message indicator away from the userbit~ */
 
 
 
.newMessageBottomLine
{
    border-top: 1px solid #d7edfc;
    padding-bottom: 2px;
}
/* ~add new line below last message above pageNavLinkGroup~ */
 
 
 
.sharePage
{
    border-top: 1px solid #d7edfc !important;
}
/* ~adds border between share page and pageNavLinkGroup~ */
 
 
 
.sharePage .shareControl
{
    float: left !important;
    margin-left: 20px !important;
}
/* ~spreads out share control items~ */
 
 
 
.sharePage
{
    padding-top: 10px !important;
}
/* ~move share items down after removal of the share heading by TMS~ */
 
 
 
.newsFeed .extra
{
    float: left !important;
    margin: 8px 0px 6px 55px!important;
}
/* ~indent and center your_news_feed button~ */
 
 
 
.quickReply
{
    border-top: none !important;
    margin-bottom: 10px !important;
    padding: 2px 0px 0px 5px !important;
}
/* ~remove top border for better signature look~ */
 
 
 
#QuickReply
{
    margin-left: 10px !important;
    margin-right: 140px !important;
    border-top: none !important;
}
/* ~QuickReply moved to the right side~ */
 
 
 
.titleBar
{
    display: none;
}
/* ~remove titleBar all pages~ */
 
 
 
.discussionListItem .posterDate
{
    margin-top: 3px;
}
/* ~move second row down, under discussion list title~ */
 
 
 
.discussionList .sectionHeaders
{
    border-radius: 12px;
}
/* ~add radius to discussion list header bar~ */
 
 
 
.discussionList .sectionFooter
{
    border-radius: 5px;
}
/* ~add radius to discussion list footer~ */
 
 
 
#pageDescription
{
    display: none !important;
}
/* ~removes description below thread title~ */
 
 
 
.breadBoxTop
{
    padding: 10px 5px 0px 5px;
    margin: 0 -5px;
    overflow: hidden;
    zoom: 1;
    clear: both;
}
/* ~move top breadbox down closer to top navlink group~ */
 
 
 
.breadBoxBottom
{
    padding: 0px 5px 0px 5px;
    margin: 0 -5px;
    overflow: hidden;
    zoom: 1;
    clear: both;
}
/* ~move breadbox bottom up closer to bottom navlink group~ */
 
 
 
.breadBoxBottom .topCtrl
{
    margin-left: 5px !important;
}
/* ~change position of new lower breadbox post-new-thread button~ */
 
 
 
.member_view .breadBoxBottom
{
    margin-top: 10px !important;
}
/* ~move bottom breadbox down on profile pages~ */
 
 
 
.forum_view .pageNavLinkGroup .callToAction
{
    display: none;
}
/* ~remove original lower post-new-thread button~ */
 
 
 
.conversation_list .pageNavLinkGroup .callToAction
{
    display: none;
}
/* ~remove original lower start-a-new-conversation button~ */
 
 
 
.forum_view .breadBoxTop
{
    padding: 10px 5px 5px 5px;
}
/* ~raise category title up toward breadbox~ */
 
 
 
.thread_view .breadBoxBottom
{
    padding: 5px 5px 0px 5px;
}
/* ~add space above bottom breadbox~ */
 
 
 
.conversation_list .breadBoxTop
{
    padding: 10px 0px 20px 5px;
}
/* ~move category title down from breadbox~ */
 
 
 
.conversation_list .breadBoxBottom
{
    padding: 5px 0px 0px 5px;
}
/* ~add space above bottom breadbox~ */
 
 
 
.pageNav .pageNavHeader
{
    margin-left: 10px !important;
}
/* ~move page note over~ */
 
 
 
.xenForm .sectionHeader:first-child
{
    margin-top: 10px !important;
}
/* ~move heading down on account pages~ */
 
 
 
.watch_threads .breadBoxTop
{
    margin-bottom: 8px !important;
}
/* ~move content down on watched threads page~ */
 
 
 
.watch_threads .breadBoxBottom
{
    margin-top: 10px !important;
}
/* ~create space above breadbox~ */
 
 
 
.accountContent
{
    padding: 15px 0px 0px 10px !important;
}
/* ~create space around text~ */
 
 
 
#content .pageContent
{
    padding: 10px 5px 10px 5px !important;
}
/* ~widen page content to the maximum possible using small margins~ */
 
 
 
.thread_view .section
{
    margin: 10px auto 0px auto !important;
}
/* ~move new line up to match other messages~ */
 
 
 
.thread_view .pageNavLinkGroup
{
    margin: 10px 10px 10px 20px !important;
}
/* ~move page note over~ */
 
 
 
.thread_view .textHeading
{
    border: none !important;
}
/* ~move sharePage down to match up margin~ */
 
 
 
.xenForm .submitUnit
{
    border-top: none;
}
/* ~removes line above login button on user not found error page~ */
 
 
 
.watch_threads .discussionList .sectionMain
{
    padding: 10px 0px 10px 0px !important;
}
/* ~spaces top and bottom breadbox~ */
 
 
 
#AccountMenu
{
    width: 294px;
}
/* ~increase width for long usernames~ */
 
 
 
.footerLegal .pageContent
{
    padding: 5px 0px 5px 0px;
}
/* ~reduces space under footerLegal~ */

 

[Neil E.]

That second article is very helpful. One statement was quite interesting:

!important is still mostly a hack around the basic rules and is something you should never need if you understand how the rules work.

 

[Russ]

One error I see:

.messageList .message
{
    padding-bottom; 10px !important;
}

padding-bottom: not padding-bottom;

 

[Neil E.]

Nice! Thank you, I looked at that many times and didn't catch it. Fixed!

And it was right in front of my face in post 11! [Smacks head on desk many times]

I'm glad these problems are MY fault, but it doesn't explain the weirdness of post 1.

Could that one colon error create the strange behaviour?

 

[Neil E.]

The code with the error would have to be above only the .forum_list .node .nodeIcon code if it caused the weirdness. I'm fairly certain this was not the case.

 

[gldtn]

Thank you for looking at this. I tried the code exactly as you have it listed and wound up with no overwriting taking place. This is what really bugs me.

No problem, but don't get frustrated at Xenforo please , it's usually us that over look at things and we end up making minor errors such as small typos.

.nodeInfo, .forumNodeInfo primaryContent
{
border-top: 1px solid #d7edfc !important;
border-right: 1px solid #d7edfc !important;
border-bottom: 1px solid #d7edfc !important;
border-left: 1px solid #d7edfc !important;
border-radius: 10px 10px 10px 10px !important;
margin: 5px 5px 5px 5px !important;
}
/* ~adds border and margin to forum nodes~ */

primaryContent is a class and should have . before it (ie) .primaryContent

.messageList .message
{
padding-bottom; 10px !important;
}
/* ~reduce bottom padding to bring up pageNavLinkGroup~ */

remove the semi colon(;) and add :

I disagree on SP as the way to go. I found it to be way too global for me. There should be no reason why I can't do everything with EXTRA (or new templates). I have read that css precedence article before and I will study the other one now.

You can 'almost' do everything through there, but the extra.css template is a way to over write the current css styling that has already been coded for xenforo and in my opinion your just doing extra work that is not needed. If I were you, I would learn your way around the "SP" and go from there, but that's just my opinion! With that said, let me try to answer your next statement;

That second article is very helpful. One statement was quite interesting:

!important rule was created mainly to over write users browsers preferences where you would think would break your site if they had some funky options set in their browser. Although over time, it's use has grown and it's considered to be a lazy way/hack to code css, not following css precedence. Now since all we are doing is over writing Xenforo default CSS through the EXTRA.CSS template, it's hard not to make the use of !important rule, unless you want to edit the corresponding templates directly. Here on my end, since I know !important rule can be very bad, I only add it on a necessary basis! Hence, it's one of the reason I use the style property, to void having !important all over my css code.

Hope this helps

 

[Neil E.]

It helps immensely. Good catch on .primaryContent, sometimes I will cut and paste from Firebug to save time. This is probably not very wise. Notice how the dot is missing there. I wonder why the code worked with the dot missing?

 

[Neil E.]

When I started looking at XF, I thought it was great to have the SP, but after trying different color combinations I was disappointed. There were many odd spots that inherited colors I didn't want in those locations. This meant going back to EXTRA for changes. I also found it very difficult to work "backwards" from SP. This was due to the fact that the tooltip hovers didn't always match the class names so it was really confusing. As a new user, matching the SP descriptions to the actual forum locations was very tough. I am very familiar with SP now, but the lack of properties for some items stopped me dead in the beginning. I haven't found a decent blend of EXTRA and SP. My current thought is to minimze SP content and get proficient with EXTRA. If I ever wanted an assistant, it would more difficult explaining how to use SP than how to use EXTRA.

I think that anyone who really wants to dig into being an admin winds up getting sucked into working with the detailed stuff. I noticed a lot of old posts where users asked for a "roadmap". I believe that the designers expected Firebug or it's equivalent to handle that function. Fine for templates but little value for SP. Without a "roadmap" to kickstart new users, XF will always be a struggle for them. I'm still struggling and I'm not much beyond beginner. Experienced forum admins are able to jump right in and see the value of XF immediately.