XF 1.2 Style Lost all Structure, Please help!

[OakleyForum]

I was working on one of my styles, tweaking colors and what not. And I went to edit the xenforo_sections.css file to change the section main color, and when I changed it my website looked like the picture below! I quicky undid the change but it didn't fix it, neither did copying the xenforo_sections.css from another theme. It looks like the site lost all structure, everything is just down the side!

Does anyone know what is happening? I'd rather not have to re-create this theme from scratch since users enjoy it.

Thanks

 

[OakleyForum]

The quickest way to resolve the issue will be to click on customised components for the style.
Click on each customised template in turn.
Copy and paste the contents to notepad, save it as a back up on your PC.
Revert the template.
If it fixes it, it was that template.
If it doesn't copy the backed up notepad contents back to the template and save.
Move on to the next template.

Tried this and nothing happened. For the new skin, there was only one customized component, and reverting did nothing, neither did restoring it. I will try on Blue Moon Dark

 

[OakleyForum]

Here is the only file that comes up for the broken skin its Xenforo_Sections.css

.section
{
    @property "section";
    color: rgb(0, 0, 0);
    margin: 10px auto;
    @property "/section";
}

.sectionMain
{
    @property "sectionMain";
    background-color: rgb(242, 246, 248);
    padding: 6px;
    margin: 10px auto;
    border: 2px solid @primaryLighter;
    border-radius: 10px;
    @property "/sectionMain";
}

.heading,
.xenForm .formHeader
{
    @property "heading";
    font-weight: bold;
    font-size: 11pt;
    color: rgb(255, 255, 255);
    background: rgb(0, 68, 114) url('@imagePath/bluemoon/gradients/gradient.png') repeat-x;
    padding: 5px 10px;
    margin-bottom: 3px;
    border-bottom: 1px solid @primaryMedium;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    @property "/heading";
}

    .heading a { color: @heading.color; }

.subHeading
{
    @property "subHeading";
    font-size: 11px;
    color: @textCtrlBackground;
    background: rgb(0, 68, 114) url('@imagePath/bluemoon/gradients/gradient.png') repeat-x top;
    padding: 5px 10px;
    margin: 3px auto 0;
    border-top: 1px none @primaryDarker;
    border-bottom: 1px none @primaryDarker;
    @property "/subHeading";
}

    .subHeading a { color: @subHeading.color; }

.textHeading,
.xenForm .sectionHeader
{
    @property "textHeading";
    font-variant: small-caps;
    font-weight: bold;
    color: rgb(255, 255, 255);
    padding-bottom: 2px;
    margin: 10px auto 5px;
    border-bottom: 1px solid @primaryLighterStill;
    @property "/textHeading";
}

.xenForm .sectionHeader,
.xenForm .formHeader
{
    margin: 10px 0;
}

.primaryContent > .textHeading:first-child,
.secondaryContent > .textHeading:first-child
{
    margin-top: 0;
}

.larger.textHeading,
.xenForm .sectionHeader
{
    color: @primaryLighter;
    font-size: 11pt;
    margin-bottom: 6px;
}

    .larger.textHeading a,
    .xenForm .sectionHeader a
    {
        color: @primaryLighter;
    }

.primaryContent
{
    @property "primaryContent";
    font-size: 13px;
    color: rgb(255, 255, 255);
    background-color: rgb(3, 42, 70);
    padding: 10px;
    border-bottom: 1px solid rgb(42, 79, 106);
    @property "/primaryContent";
}

    .primaryContent a
    {
        @property "primaryContentLink";
        color: rgb(195, 228, 250);
        @property "/primaryContentLink";
    }

.secondaryContent
{
    @property "secondaryContent";
    background: @primaryDarker url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
    padding: 10px;
    border-width: 1px;
    border-top-color: rgb(232,;
    border-right-color: 235,;
    border-bottom-style: none;
    border-bottom-color: @primaryLighterStill;
    border-left-color: 235,;
    border-radius: 5px;
    @property "/secondaryContent";
}

    .secondaryContent a
    {
        @property "secondaryContentLink";
        color: rgb(178, 214, 237);
        @property "/secondaryContentLink";
    }

.sectionFooter
{
    overflow: hidden; zoom: 1;
    @property "sectionFooter";
    font-size: 11px;
    color: @primaryLightish;
    background: @primaryLighterStill url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
    padding: 4px 10px;
    border-bottom: 1px solid @primaryLighter;
    line-height: 16px;
    @property "/sectionFooter";
}

    .sectionFooter a { color: @sectionFooter.color; }

    .sectionFooter .left
    {
        float: left;
    }

    .sectionFooter .right
    {
        float: right;
    }

/* used for section footers with central buttons, esp. in report viewing */

.actionList
{
    text-align: center;
}

/* left-right aligned options */

.opposedOptions
{
    overflow: hidden; zoom: 1;
}
  
    .opposedOptions .left
    {
        float: left;
    }
  
    .opposedOptions .right
    {
        float: right;
    }

 

[Lukas W.]

This page shows how your template (right) differs from the original template (left). Make a backup of the Xenforo_Sections.css's content and then revert it to the original. Open up the Extra.css template and include all changes you made in the Xenforo_Sections.css one by one. So to say your first step would be adding

.section {
color: rgb(0,0,0);
}

to the Extra.css file. Save the file and check the style after every change made. This may sounds like a lot of daft work, but when you're done you will have located the error and moved your template edits to the Extra.css file (like you probably should have done from the rather beginning but we all make mistakes) and will have an easier life when further editing css-templates.

 

[Amaury]

This page shows how your template (right) differs from the original template (left). Make a backup of the Xenforo_Sections.css's content and then revert it to the original. Open up the Extra.css template and include all changes you made in the Xenforo_Sections.css one by one. So to say your first step would be adding

.section {
color: rgb(0,0,0);
}

to the Extra.css file. Save the file and check the style after every change made. This may sounds like a lot of daft work, but when you're done you will have located the error and moved your template edits to the Extra.css file (like you probably should have done from the rather beginning but we all make mistakes) and will have an easier life when further editing css-templates.

I personally edit the templates directly when making my styles and only use EXTRA.css for what I can't get. I've run into those issues before and have just been more careful since. For example, I made the mistake once of editing CSS code in a template that was surrounded in @property, meaning a style property controlled that and changing something in there caused problems.

 

[Lukas W.]

You sure can edit templates directly but as soon as you run into trouble, you will have to spend a lot of time and/or work to look through your edits. Storing them into the Extra.css like explained above does exactly the same to your forum but will secure your edits through XenForo updates and will provide you all changes in one template to make life easier in the future if you need to overview your changes. Also this is, what the Extra.css is there for, so it should probably used for this kind of stuff.

But however, it doesn't really matter if he does the edits to the original template or add them to the Extra.css if you do not take the arguments above in concern. The main process - reverting and doing the edits one by one again - is the most important part here.

 

[OakleyForum]

This page shows how your template (right) differs from the original template (left). Make a backup of the Xenforo_Sections.css's content and then revert it to the original. Open up the Extra.css template and include all changes you made in the Xenforo_Sections.css one by one. So to say your first step would be adding

.section {
color: rgb(0,0,0);
}

to the Extra.css file. Save the file and check the style after every change made. This may sounds like a lot of daft work, but when you're done you will have located the error and moved your template edits to the Extra.css file (like you probably should have done from the rather beginning but we all make mistakes) and will have an easier life when further editing css-templates.

The issue is, when the template is reverted, it doesn't fix the issue, it still shows it. I will create a new style and go through the changes to try to identify it.

 

[OakleyForum]

Just copied your original in there and it fixed it. I'll go through with making the changes into extra.css and solve it from there. Thanks for the help! I'll let you guys know what caused it!

 

[Lukas W.]

You can easily identify your changes by comparing your template with the original one. As said above, I'd recommend doing this step by step and adding the altered code to the extra.css. Don't worry about "doubled" entries, e.g. when you want to change "padding: 10px;" to "padding: 6px; ". I've taken the template from a fresh XenForo installation, so you practically have a completely unaltered there. Seems like your revert function does not work correctly (whyever).

 

[Digital Doctor]

"Blue Moon Dark"

If all your members are wearing Oakleys, your dark style will be too dark, they won't be able to read your forum with the glasses on.
and then all posting will stop, and you'll be like .. WTF. Stick with the non-dark style, IMO.

Blue Moon looks great !

You might want to consider XenReviews.com ....(a review addon) ... you can Review all the Oakley sunglasses .... after a few years of collecting reviews ... you could be the go to source for Oakley reviews !

 

[OakleyForum]

If all your members are wearing Oakleys, your dark style will be too dark, they won't be able to read your forum with the glasses on.
and then all posting will stop, and you'll be like .. WTF. Stick with the non-dark style, IMO.

Blue Moon looks great !

You might want to consider XenReviews.com ....(a review addon) ... you can Review all the Oakley sunglasses .... after a few years of collecting reviews ... you could be the go to source for Oakley reviews !

Hahaha, It was actually our members who requested a dark style, they said our primary one is too bright, though I prefer Blue Moon. I will consider the Review Addon, however there is another source for Oakley Reviews on the web, but it is something I have considered. Thanks for the link, looks like a great add-on!

 

[IcEWoLF]

I am having the same issue as OP...not sure how to fix this...
I've reverted the template and it didn't fix it. Could this be an issue within XenForo?

/* ***************************** */
/* Basic Tabs */

.tabs
{
    @property "tabsContainer";
    font-size: 11px;
    color: @dimmedTextColor;
    border-bottom: 1px solid rgb(17, 63, 127);
    word-wrap: normal;
    min-height: 23px;
    _height: 23px;
    @property "/tabsContainer";
   
    display: table;
    width: 100%;
    *width: auto;
    box-sizing: border-box;
}

.tabs li
{
    float: left;
}

.tabs li a,
.tabs.noLinks li
{
    @property "tab";
    color: @contentBackground;
    text-decoration: none;
    background-color: rgb(4, 22, 51);
    padding: 0 8px;
    margin-right: -1px;
    margin-bottom: -1px;
    border: 1px solid rgb(17, 63, 127);
    border-bottom: 0px solid rgb(4, 4, 4);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 0px;
    display: inline-block;
    line-height: 22px;
    cursor: pointer;
    outline: 0 none;
    white-space: nowrap;
    word-wrap: normal;
    height: 22px;
    @property "/tab";
}

.tabs li:hover a,
.tabs.noLinks li:hover
{
    @property "tabHover";
    text-decoration: none;
    background-color: rgb(4, 22, 51);
    @property "/tabHover";       
}

.tabs li.active a,
.tabs.noLinks li.active
{
    @property "tabActive";
    background-color: rgb(4, 4, 4);
    padding-bottom: 1px;
    border-top-color: rgb(17,;
    border-right-color: 63,;
    border-bottom: 1px none rgb(10, 53, 113);
    border-left-color: 63,;
    @property "/tabActive";
}

/* Tabs inside forms */

.xenForm .tabs,
.xenFormTabs
{
    padding: 5px @ctrlUnitEdgeSpacer 0;
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    .Responsive .tabs li
    {
        float: none;
    }

    .Responsive .tabs li a,
    .Responsive .tabs.noLinks li
    {
        display: block;
    }
}
</xen:if>