1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Inherit default sidebar style from Sidebar > Block Heading

Discussion in 'Media Gallery Support' started by Moddis, Feb 12, 2015.

  1. Moddis

    Moddis Active Member

    Since the media Gallery and XenForo are one whole now, it might make sense to merge the style of the sidebar sections. I don't see any reason why the style for ".container .xengallerySideBar .section h3" and ".sidebar .section .secondaryContent h3" should be different for anyone so would be much more user friendly if it was just once class applied to both.

    Currently its two different styles for the section header :
    Code:
    .sidebar .section .primaryContent   h3,
    .sidebar .section .secondaryContent h3,
    .profilePage .mast .section.infoBlock h3
    {
        @property "sidebarBlockHeading";
        font-size: 12pt;
        color: @textCtrlBackground;
        padding: 0 0 2px 5px;
        margin-bottom: 5px;
        border-bottom: 1px solid @textCtrlText;
        border-radius: 5px;
        @property "/sidebarBlockHeading";
    }
    
    .sidebar .section .primaryContent   h3 a,
    .sidebar .section .secondaryContent h3 a
    {
        @property "sidebarBlockHeading.font";
        font-size: 12pt;
        color: @textCtrlBackground;
        @property "/sidebarBlockHeading.font";
    }
    
    AND
    
    .container .xengallerySideBar .section h3
    {
        @property "categorySidebarBlockHeading";
        font-size: 12pt;
        color: @primaryLight;
        padding-bottom: 2px;
        margin-bottom: 5px;
        border-bottom: 1px solid @primaryLighterStill;
        @property "/categorySidebarBlockHeading";
    }
    
    .container .xengallerySideBar .section h3 a
    {
        color: @primaryLight;
    }
    As an Example, even on here, the style is the same for both areas:

    HTML:
    .container .xengallerySideBar .section h3 {
    font-size: 12pt;
    color: #6cb2e4;
    padding-bottom: 2px;
    margin-bottom: 5px;
    border-bottom: 1px solid #d7edfc;
    }
    
    AND
    
    .sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3 {
    font-size: 12pt;
    color: #6cb2e4;
    padding-bottom: 2px;
    margin-bottom: 5px;
    border-bottom: 1px solid #d7edfc;
    }
    
     
    Last edited: Feb 12, 2015
    Allan likes this.
  2. Moddis

    Moddis Active Member

    Actually, I realized that the style is infact the same for both header areas. Its just that I made changed to the general sidebar section area and assumed those changes would automatically apply to the sidebar section of media content area.
     
    Last edited: Feb 12, 2015
  3. Allan

    Allan Well-Known Member

    Good idea.
     
  4. Mike

    Mike XenForo Developer Staff Member

  5. Moddis

    Moddis Active Member

    Cool, standardization is good.
     
  6. Moddis

    Moddis Active Member

    With the new release, the random/new block did inherit some of the standard XenForo Styles but it did not really affect what I mentioned here (the XMG left sidebar/navigation ).

    The random media block and the right sidebar in XMG both style their headers via ".sidebar .section .secondaryContent h3". However, the left sidebar is styled using ".container .xengallerySideBar .section h3"

    [​IMG]

    I don't see any reason why the left sidebar would need to be styled differently from the right sidebar so it might as well use the generic sidebar block styling of ".sidebar .section .secondaryContent h3" and save someone from updating their custom sidebar style in two different areas. So why not just update the html and change "<div class="xengallerySideBar">" to "<div class="sidebar">" so that all the same styles can be applied to it as with other sidebars?

    Doh, okay I see why. The xengallerySideBar is needed because it says the sidebar needs to have a "margin-left: -230px" which the regular sidebar does not have. So in order to fix that, I tried the following and it worked pretty good for me:

    - Change "<div class="xengallerySideBar">" To "<div class="xengallerySideBar sidebar">"
    - Remove from CSS the style for ".container .xengallerySideBar .section h3".



    Anyway, I guess its not too much trouble updating the custom sidebar style in both places if my suggestion does not work.
     

Share This Page