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

XF 1.3 (Solved) EXTRA.CSS not working after edit public.css

Discussion in 'Troubleshooting and Problems' started by jmmp, Jul 29, 2014.

  1. jmmp

    jmmp Member

    Hi, (sorry, i'm not speak english)

    Today i've edited the template public.css and then EXTRA.CSS stopped working.

    I've edited this line in public.css:

    .messageText img,
    .messageText iframe,
    .messageText object,
    .messageText embed
    {
    max-width: 80%;
    }

    I reverted 80% to 100% and EXTRA.CSS not works.

    I can not find the solution and I am very concerned.
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    If none of the CSS in EXTRA.css works, then check for errors in the templates.

    Typically it is due to malformed CSS.
     
  3. jmmp

    jmmp Member

    None of the CSS in EXTRA.css works.

    How can i check errors in the templates? Any tool?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Try Notepad++.
     
  5. jmmp

    jmmp Member

    I can not fix anything with Notepad++... :(
     
    Last edited: Jul 30, 2014
  6. jmmp

    jmmp Member

    I'm going to paste my public.css template.

    Is there something wrong about code?

    Code:
    <xen:include template="header.css" />
    
    <xen:include template="footer.css" />
    
    <xen:include template="breadcrumb.css" />
    
    <xen:include template="navigation.css" />
    
    <xen:include template="search_bar.css" />
    
    /** move the header to the top again **/
    
    #headerMover
    {
        position: relative;
        zoom: 1;
    }
    
        #headerMover #headerProxy
        {
            @property "header.background";
            background-image: url('http://www.xxxxxxxxxxxxxxxxxx.gif');
            @property "/header.background";
            height: {xen:calc '@headerLogoHeight + @headerTabHeight * 2 + 2'}px; /* +2 borders */
        }
    
        #headerMover #header
        {
            width: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    
    
    /** Generic page containers **/
    
    .pageWidth
    {
        @property "pageWidth";
        padding-right: 5px;
        padding-left: 5px;
        margin: 0 1%;
        _width: 976px;
        _margin: 0 auto;
        box-sizing: border-box;
        @property "/pageWidth";
    }
    
    .NoResponsive body
    {
        <xen:if is="@nonResponsiveMinWidth">min-width: @nonResponsiveMinWidth;</xen:if>
    }
    
    #content .pageContent
    {
        @property "content";
        background-color: rgb(236, 242, 237);
        padding: 10px 20px;
        @property "/content";
    }
    
    {xen:helper clearfix, '#content .pageContent'}
    
    <xen:include template="sidebar.css" />
    
    /** Text used in message bodies **/
    
    .messageText
    {
        @property "messageText";
        font-size: 10pt;
        font-family: verdana;
        line-height: 1.4;
        @property "/messageText";
    }
    
        .messageText img,
        .messageText iframe,
        .messageText object,
        .messageText embed
        {
            max-width: 80%;
        }
    
    /** Link groups and pagenav container **/
    
    .pageNavLinkGroup
    {
        display: table;
        *zoom: 1;
        table-layout: fixed;
        box-sizing: border-box;
    
        @property "pageNavLinkGroup";
        font-size: 13px;
        margin: 10px 0;
        line-height: 16px;
        @property "/pageNavLinkGroup";
    }
    
    opera:-o-prefocus, .pageNavLinkGroup
    {
        display: block;
        overflow: hidden;
    }
    
        .pageNavLinkGroup:after
        {
            content: ". .";
            display: block;
            word-spacing: 99in;
            overflow: hidden;
            height: 0;
            font-size: 0.13em;
            line-height: 0;
        }
    
        .pageNavLinkGroup .linkGroup
        {
            float: right;
        }
    
    .linkGroup
    {
    }
    
        .linkGroup a
        {
            @property "linkGroupLink";
            padding: 3px 0;
            @property "/linkGroupLink";
        }
    
            .linkGroup a.inline
            {
                padding: 0;
            }
    
        .linkGroup a,
        .linkGroup .Popup,
        .linkGroup .element
        {
            margin-left: @linkGroupLinkSpacing;
            display: block;
            float: left;
            <xen:if is="{$pageIsRtl}">*display: inline; *float: none; *zoom: 1;</xen:if>
        }
    
            .linkGroup .Popup a
            {
                margin-left: -2px;
                margin-right: -5px;
                *margin-left: @linkGroupLinkSpacing;
                padding: @linkGroupLink.padding-top 5px;
            }
    
        .linkGroup .element
        {
            padding: 3px 0;
        }
    
    /** Call to action buttons **/
    
    a.callToAction
    {
        @property "callToAction";
        background: @primaryLighter url('@imagePath/xenforo/gradients/form-button-white-25px.png') repeat-x center top;
        padding: 2px;
        border: 1px solid @primaryLighter;
        border-radius: 6px;
        display: inline-block;
        line-height: 20px;
        box-shadow: 1px 1px 5px rgba(0,0,0, 0.15);
        outline: 0 none;
        vertical-align: top;
        height: 20px;
        @property "/callToAction";
    
    }
    
        a.callToAction span
        {
            @property "callToActionSpan";
            background: rgb(176, 228, 165) url('@imagePath/xenforo/gradients/form-button-white-25px.png') repeat-x center -8px;
            padding: 4px;
            border: 1px solid rgb(176, 228, 165);
            border-radius: 6px;
            display: inline-block;
            line-height: 10px;
            box-shadow: 1px 1px 5px rgba(0,0,0, 0.15);
            outline: 0 none;
            height: 10px;
            @property "/callToActionSpan";
        }
    
        a.callToAction:hover
        {
            text-decoration: none;
        }
    
            a.callToAction:hover span
            {
                @property "callToActionHover";
                color: rgb(0, 0, 0);
                background-color: rgb(255, 255, 200);
                border-top-color: rgb(255,;
                border-right-color: 255,;
                border-bottom-color: rgb(190, 190, 170);
                border-left-color: 255,;
                @property "/callToActionHover";
            }
        
            a.callToAction:active
            {
                /*position: relative;
                top: 2px;*/
            }
        
            a.callToAction:active span
            {
                @property "callToActionActive";
                background-color: @primaryMedium;
                @property "/callToActionActive";
            }
    
    /*********/
    
    .avatarHeap
    {
        overflow: hidden; zoom: 1;
    }
    
        .avatarHeap ol
        {
            margin-right: -4px;
            margin-top: -4px;
        }
    
            .avatarHeap li
            {
                float: left;
                margin-right: 4px;
                margin-top: 4px;
            }
        
    /*********/
    
    .fbWidgetBlock .fb_iframe_widget,
    .fbWidgetBlock .fb_iframe_widget > span,
    .fbWidgetBlock .fb_iframe_widget iframe
    {
        width: 100% !important;
    }
    
    <xen:include template="username_styles.css" />
    
    <xen:include template="thread_prefixes.css" />
    
    <xen:include template="user_banners.css" />
    
    <xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth)
    {
        .Responsive .pageWidth
        {
            @property "pageWidthResponsiveWide";
    
            @property "/pageWidthResponsiveWide";
        }
    
        .Responsive #content .pageContent
        {
            padding-left: {xen:calc '@content.padding-left / 2'}px;
            padding-right: {xen:calc '@content.padding-right / 2'}px;
        }
    }
    
    @media (max-width:@maxResponsiveMediumWidth)
    {
        .Responsive .pageWidth
        {
            @property "pageWidthResponsiveMedium";
            padding-right: 0;
            padding-left: 0;
            margin-right: 0;
            margin-left: 0;
            @property "/pageWidthResponsiveMedium";
        }
    
        .Responsive .forum_view #pageDescription,
        .Responsive .thread_view #pageDescription
        {
            display: none;
        }
    }
    
    @media (max-width:@maxResponsiveNarrowWidth)
    {
        .Responsive .pageWidth
        {
            @property "pageWidthResponsiveNarrow";
    
            @property "/pageWidthResponsiveNarrow";
        }
    
        .Responsive .pageNavLinkGroup .PageNav,
        .Responsive .pageNavLinkGroup .linkGroup
        {
            clear: right;
        }
    }
    </xen:if>
    
    <xen:include template="EXTRA.css" />
     
    Last edited: Jul 30, 2014
  7. jmmp

    jmmp Member

    Any idea?
     
    Last edited: Jul 30, 2014
  8. eberkund

    eberkund Active Member

    Change this part
    Code:
    /* message_simple.css */
    
    .messageSimple .messageContent
    {
    min-height: 35px;
    }
    font-family: verdana !important;
    font-size: 12px !important;
    }
    to this:
    Code:
    /* message_simple.css */
    
    .messageSimple .messageContent
    {
    min-height: 35px;
    font-family: verdana !important;
    font-size: 12px !important;
    }
     
  9. jmmp

    jmmp Member

    Not works...

    Thank you, eberkund.
     
    Last edited: Jul 30, 2014
  10. jmmp

    jmmp Member

    Solved!

    I've found the code error in public.css.

    Search:

    a.callToAction:hover span
    {
    @property "callToActionHover";
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 200);
    border-top-color: rgb(255,;
    border-right-color: 255,;

    border-bottom-color: rgb(190, 190, 170);
    border-left-color: 255,;
    @property "/callToActionHover";
    }

    ( :eek: :eek: )

    Replace to:

    a.callToAction:hover span
    {
    @property "callToActionHover";
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 200);
    @property "/callToActionHover";
    }

    Now EXTRA.css works fine.
     
    Last edited: Jul 30, 2014

Share This Page