XF 2.1 Problem with the logo

Sort by date Sort by votes
Good morning, from what I can tell, there is a change that is over-riding this in app_header.less:

CSS: 
    &.p-header-logo--image
    {
        img
        {
            vertical-align: bottom;
            max-width: 100%;
            max-height: 200px;
        }
    }

The max width is defaulted to 100%, but it is being over-ridden in your style by this:

Code: 
    &.p-header-logo--image
    {
        img
        {
            vertical-align: bottom;
            max-width: 70%;
            max-height: 200px;
        }
    }

It starts off with a max-width of 70% (which is why the logo is smaller), and then in extra.less (most likely) it is set to max-width: 100%!important;

Your style is over-riding the css code for the logo image two additional times, you should check the extra.less for your style to see if it is there and remove them, :)

Lawrence
 
Upvote 0 Downvote
In app_header.less I have found

Code: 
// MAIN HEADER ROW

.p-header
{
    .xf-publicHeader();

    a
    {
        color: inherit;
    }
}

.p-header-inner
{
    .m-pageWidth();
    .m-pageInset();
}

.p-header-content
{
    padding: @xf-paddingMedium 0;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
}

.p-header-logo
{
    vertical-align: middle;
    margin-right: auto;

    a
    {
        color: inherit;
        text-decoration: none;
    }

    &.p-header-logo--text
    {
        font-size: @xf-fontSizeLargest;
    }

    &.p-header-logo--image
    {
        img
        {
            vertical-align: bottom;
            max-width: 100%;
            max-height: 200px;
        }
    }
}

@media (max-width: @xf-publicNavCollapseWidth)
{
    .has-js .p-header
    {
        display: none;
    }
}

@media (max-width: @xf-responsiveNarrow)
{
    .p-header-logo
    {
        max-width: 100px;

        &.p-header-logo--text
        {
            font-size: @xf-fontSizeLarge;
            font-weight: @xf-fontWeightNormal;
            .m-overflowEllipsis();
        }
    }
}

and this is my extra.less
Code: 
/* Forum read & unread icons */
.node--forum.node--read .node-icon i:before{content: url(https://www.interfans.org/immagini/icone-new2.png);}
.node--forum.node--unread .node-icon i:before{content: url(https://www.interfans.org/immagini/icone-new1.png);}

/* Subforum read & unread icons */
.subNodeLink:before{content: url(/immagini/) !important;}
.subNodeLink.subNodeLink--unread:before{content: url(/immagini/) !important;}


/**********/

/* Coloured Node Categories */
.block.block--category.block .block-header {
 background-repeat: repeat-y;
    background-color: #000000;
    color: #ffffff;
    border-bottom: 3px solid #A29161;
}
/**********/

/* Links in posts */
a.link
{
    color: #0026FF;
    font-weight: bold;
    text-decoration: underline;
}
.message-cell.message-cell--user, .message-cell.message-cell--action
{
background: #EDEAEA;
}
/* fix smilies issue */
.smilie--sprite {
    background-size: 22px !important;
}

/* link color */
.p-breadcrumbs a {
    color: white;
}

/* sidebar block title */
.block-minorHeader  {
    color: #ffffff;
    text-decoration: none;
    background-color: black;
    padding-left: 5px;
    padding-right: 3px;
    display: block;
    border-bottom: 3px solid #173874;
}

#Skinxcpciu1  {
    margin-top: 0px;
    margin: 0px;
    padding: 0px;
    padding-top: 0px;
    background-color: black;
    line-height: 0.1;
}

#DSKInterstitialnoForumxcpciu18 {
    margin-top: 0px;
    margin: 0px;
    padding: 0px;
    padding-top: 0px;
    background-color: black;
    line-height: 0.1;
}


/* custom notice background */
.custom-notice
{background:    #ffc060;
color:#000000}
.custom-notice a
{color:#111c4e; font-weight: bold;}

.qc-cmp-persistent-link{
    visibility:hidden;
}



.p-nav {
    color: #FFF;
    background: #0a65aa;
}
.p-navEl a{
    font-weight: bold;
    
}
.p-nav-list .p-navEl-link, .p-nav-list .p-navEl-splitTrigger {
    padding-top: 15px;
    padding-bottom: 15px;
}
.p-breadcrumbs a {
    color: #131313;
    font-weight: normal !important;
}

.node--depth2:nth-child(even) .node-body {
    background-color: #F9F9F9;
}

.p-sectionLinks {
    font-size: 13px;
    color: #fafbfd;
    background: #155691;
    border-bottom: 1px solid #155691;
    font-weight: normal;
}
.p-sectionLinks-list .p-navEl-link, .p-sectionLinks-list .p-navEl-splitTrigger {
    font-weight: normal;
}
.p-nav-list .p-navEl.is-selected {
    color: #ffffff;
    background: #155691;
 }

.p-pageWrapper {
     background: #F6F6F6;
 }
.p-title-value {
    color: #000;
}
.block-header a {
    color: #b89256;
    text-transform: uppercase;
    font-size:18px;
}
.block-container:not(.block-container--noStripRadius) > :first-child, .block-topRadiusContent, .block-container:not(.block-container--noStripRadius) > .block-body:first-child > .blockLink:first-child {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.block-header {
    padding: 10px 15px;}
.node-title{
    font-weight:bold
}
.block.block--category.block .block-header, .block-minorHeader, .block-header {
     border-bottom: 4px solid #0a65aa;
}

.block-header, .block-tabHeader{
    background:#000000;
}
.message-userBanner.userBanner {
    background: #0a65aa;
    padding: 5px;
    border-radius: 5px;
    color: #FFF;
    border: solid 1px #0a65aa;
}

.tabs--standalone .tabs-tab.is-active {
    color: #0a65aa;
    border-color: #0a65aa;
}

.tabs--standalone{
    color:#8a8a8a;
}

.message-cell.message-cell--user {
    flex: 0 0 250px;
}

.custom-message-userExtras {
    margin-top: 3px;
    font-size: 12px;
    color: #000;
    background: #c0c0c0;
    padding: 5px;
     border: solid 1px #c0c0c0;
    border-radius: 5px;
}
.pairs > dt{
    color:#000;
}

.p-header-logo.p-header-logo--image img {
    vertical-align: bottom;
    max-width: 70%;
    max-height: 200px;
}

.button, a.button {
    border-radius: 3px;
    line-height: 30px;
    font-weight: 600;
    padding: 5px 20px;
    
}
.block-minorHeader {
    padding: 10px 15px;
     font-weight: 600;
    font-size: 18px;
    color: #b89256 !important;
}
.p-footer a {
    color: #9F9F9F;
    font-weight: 400;
}
.footer_custom_link, .footer_web_links, .footer_contact{
    width:20%;
    float: left;
    padding:0px 10px 0px 0px
    }
.footer_wc{
    width:40%;
    float: left;
    padding:0px 10px 0px 0px
    }
.customSection {
    width: 100%;
    display: block;
    float: left;
    padding-bottom: 25px;
    padding-top: 25px;
}
.customSection h3 {
    color: #b89256;
    font-size: 16px;
    border-bottom: solid 1px #0a65aa;
    padding-bottom: 20px;
    position: relative;
    margin-bottom: 20px;
}
.customSection h3:after {
    position: absolute;
    content: '';
    background-color: #0a65aa;
    height: 4px;
    width: 50px;
    left: 0px;
    bottom: 0px;
}
.customSection p {
    font-size: 15px;
    line-height: 22px;
    color: #a7a7a7;
}
.footer_custom_link ul, .footer_web_links ul, .footer_contact ul{
    margin:0px;
    padding:0px;
}
.footer_custom_link ul li, .footer_web_links ul li, .footer_contact ul li{
    list-style: none;
    line-height: 22px;

}
.footer_contact ul li i{
    padding-right:10px;
}
.p-footer-linkList {
    list-style: none;
    margin: 0;
    padding: 7px 10px;
    background-color: #3c3c3c;
    border-radius: 5px;
    float: left;
}
.p-footer-row-opposite {
    display: none;
}
.p-navgroup-link--logIn {
    border-radius: 5px;
    background-color: #b89256;
        line-height: 26px;
        padding: 8px 15px;
        font-weight: 600;
}
.p-navgroup-link--search{
     line-height: 26px;
        font-weight: 600;
}
.p-nav-opposite {
      margin-bottom: 4px;
}
.p-navgroup {
       background: transparent;
   }
.p-navgroup-link--register {
    background-color: #000;
    border-radius: 5px;
    margin-left: 5px;
        line-height: 26px;
        padding: 8px 15px;
        font-weight: 600;
}
.p-navgroup-link--search .p-navgroup-linkText{
    display:none;
}
.p-footer a:hover { color:#B89256}
.template-thread_view .pairs, .template-conversation_view .pairs {
    flex: 1;
    margin: 4px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 9px 0 rgba(0,0,0,0.1);
    padding: 4px;
    text-align: center;
}
.p-body-sidebar .pairs {
    background: transparent;
    box-shadow: none;
    color: #8c8c8c;
    margin: 0px;
    padding: 0px;
}

.p-body-sidebar .pairs > dt {
    color: #000 !important;
    font-size: 14px !important;
}
.template-thread_view .tabPanes .pairs, .template-conversation_view .tabPanes .pairs {
        margin: 0px;
    background: transparent;
    border-radius: 0px;
    box-shadow: none;
    padding: 0px;
    text-align: center;
}

.block-outer-opposite .button, a.button {
    border-radius: 3px;
    line-height: 30px;
    font-weight: 600;
    padding: 5px 10px;
}
.block-outer-opposite .button.button--link, a.button.button--link {

    color: #0a65aa;

}
.message-userTitle {
 
    color: #0a65aa !important
}
.p-footer-inner .pairs {
    flex: 1;
    margin: 0px;
    background: transparent;
    border-radius: 0px;
    box-shadow: none;
    padding: 0px;
    text-align: center;
    color:#FFF
}
.p-footer-inner .pairs > dt {
    color: #FFF !important;
    font-size: 14px !important;
}


.template-thread_view .tabPanes .pairs>dt, .template-conversation_view .tabPanes .pairs>dt  {
    color: #000;
    font-size: 13px;
}

.template-thread_view .pairs>dt, .template-conversation_view .pairs>dt {
    color: #082552;
    font-size: 17px;
}
.template-thread_view .pairs>dt:after, .template-conversation_view .pairs>dt:after {
    display:none
}
.template-thread_view .pairs.custom-pairs--justified>dt, .template-conversation_view .pairs.custom-pairs--justified>dt {
    float: left;
    max-width: 100%;
    margin-right: 0px;
    text-align: center;
    width: 100%;
    position: relative;
    height: 20px;
}
.template-thread_view .pairs.custom-pairs--justified>dd, .template-conversation_view .pairs.custom-pairs--justified>dd {
    float: left;
    text-align: center;
    max-width: 100%;
    font-size: 14px;
    width: 100%;
    font-weight: 600;
}

.template-thread_view .custom-message-userExtras, .template-conversation_view .custom-message-userExtras {
    display: flex;
    margin: 10px auto;
    max-width: 100%;
    background: transparent;
    padding: 0px;
    border: 0px;
}

.custom-dl-pairs--justified{
    margin-top: 0px;
    float: left;
    width: 46%;
}

.button.button--scroll, a.button.button--scroll {
    background: rgb(10, 101, 170);
    padding: 5px 8px;
    box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.25);
    border:none;
}
.actionBar-action {

    color: #0a65aa;
}
.block-outer-opposite .button.button--link:hover, a.button.button--link:hover {
    color: #FFF;
}
.fauxBlockLink .fauxBlockLink-blockLink {
    position: static;
    color: #0a65aa;
}


/********* pFooter Stats ********/
.p-footer-stats {
    background: #155591;
}

.p-footer-stats .pairs>dt:after{
    display:none
}
.p-footer-stats .p-footer-stats-inner {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
        max-width: 1200px;
    padding: 30px 0;
    text-align: center;
}
.node--unread .node-title a{
    font-weight: 700;
    color: #0a65aa;
}
.node-extra-row .node-extra-title, .username {
     color: #0a65aa;
    
}
.p-footer-stats .p-footer-stats-inner .pairs {
    display: inline-flex;
    align-items: center;
    margin: 0 5px;
    background-color: transparent;
    border: 0px;
    box-shadow: none;
}
.pairs.pairs--inline>dt, .pairs.pairs--inline>dd {
    display: inline;
}
.p-footer-stats .fas, .p-footer-stats .fab {
    color: #b89256;
    font-size: 32px;
    margin-right: 20px;
    
}

.social__icons{
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 6px;
    padding-left: 10px;
    margin: 0;
}
.social__icons li {
    display: inline-block;
    list-style: none;
}
.social__icons li a {
    display: block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: #228be6;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    margin-right: 4px;
}
.social__icons li a i{
    padding-right: 0px;
    
}
.social__icons li a.-facebook {
    background: #484848;
}
.social__icons li a.-twitter {
    background: #484848;
}
.social__icons li a.-instagram {
    background: #484848;
  
}
.social__icons li a i{
font-size:20px;
margin-top: 8px;

}
.social__icons li a i:hover{
color:#FFF;
}

.button.button--primary {
    color: #fff;
    background: #155591;
    min-width: 80px;
    border-color: #155591 ;
}
.button:hover{
    background: #155591 !important;
     border-color: #155591 ;
}
.pairs.pairs--inline>dt, .pairs.pairs--inline>dd {
    display: inline;
}
.p-footer-stats .p-footer-stats-inner .number {
    color: #fff;
    display: block;
    font-size: 25px;
    line-height: 1;
    font-weight:bold;
}
.p-footer-stats .p-footer-stats-inner .username {
    font-size:20px;
}
.p-footer-stats .p-footer-stats-inner .text {
    color: #eaf6ff;
    display: block;
    font-size: 18px;
}
@media (max-width: 767px){
    .p-footer-stats{
        display:none
    }
.p-footer-stats .p-footer-stats-inner {
    align-items: center;
    flex-flow: column;
    justify-content: center;
}
    .p-footer-stats .p-footer-stats-inner .pairs {
    flex-flow: column;
    margin: 10px 25px;
}
    .p-footer-stats .fas, .p-footer-stats .fab {
    margin-right: 0;
    margin-bottom: 10px;
}
}

@media (max-width: 650px){
.has-js .p-nav-smallLogo {
    display: inline-block;
    background-color: #000;
    max-width: 155px;
}

.p-header {
    height: auto;
}
.footer_wc {
    width: 100%;
}
    
    .footer_custom_link, .footer_web_links, .footer_contact {
    width: 33%;
    float: left;
    padding: 0px 10px 0px 0px;
}

}
@media (max-width: 480px){
    .footer_custom_link, .footer_web_links, .footer_contact {
        width: 100%;
    }
    
    .p-navgroup-link--logIn {

    padding: 8px 6px;
  
}
    .p-navgroup-link--register {
  
    padding: 8px 7px;
  
}
    
}
a {
    color: #0a65aa;
    text-decoration: none;
}

@media (max-width: 410px){
        .p-navgroup-link--logIn {

  display:block;
  
}
    
    .block-outer-opposite .button, a.button {
    border-radius: 3px;
    line-height: 30px;
    font-weight: 600;
    padding: 5px 6px;
        font-size:12px;
}
    .p-navgroup-link--register {
  
    display:block
  
}
    .p-nav-smallLogo img {
 
    max-height: 48px;
}

    
}



// ########################### FULL SIZE LOGO ON MOBILE ########################
.p-nav-smallLogo {
    display: none !important;
}
.p-header-logo {
    max-width: none !important;
}
.has-js .p-header {
    display: block;
}
// ########################### FULL SIZE LOGO ON MOBILE ########################

// ########################### remove footer sidebar ########################
.fw-branding
{

    background: transparent !important;
    color: #717171 !important;
    text-shadow: white 1px 1px;
    font-weight: bold;
    display: none;
 
}

/*** Hide forum title on forum list ***/
[data-template="forum_list"]
{
    .p-title-value {
        display: none;
    }
    .p-title {
        float: right;
    }
}
/**********/


.privacy_privacybutton--1Gvii
 {
    display: none !important;
}

/****subforum****/


.node-subNodeFlatList {
    >li {
        display: inline-block;
        margin-right: 0;
        float: left;
        width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
    }
}

/****subforum****/




/* Icons for Login and Register buttons */
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--logIn:before {
    .m-faBase();
    .m-faContent(@fa-var-sign-in, 1em);
    color: #000000;
}
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--register:before {
    .m-faBase();
    .m-faContent(@fa-var-key, 1em);
    color: #E6BB5C;
}
/**********/



/* Coloured Node Categories */

.block.block--category.block--category14 .block-container .block-header {
background-image: url('https://interfans.org/immagini/fascia.jpg');
background-repeat: no-repeat;
background-position: right;   
}



.block.block--category.block--category15 .block-container .block-header {
background-image: url('https://interfans.org/immagini/fascia.jpg');
background-repeat: no-repeat;
background-position: right;   
}

.block.block--category.block--category16 .block-container .block-header {
background-image: url('https://interfans.org/immagini/fascia.jpg');
background-repeat: no-repeat;
background-position: right;   
}

 @media(max-width: 499px){.block.block--category.block--category14 .block-container .block-header {background-repeat: repeat-y;
    background-color: #000000;
    color: #ffffff;
    border-bottom: 3px solid #A29161;}}

 @media(max-width: 499px){.block.block--category.block--category15 .block-container .block-header {background-repeat: repeat-y;
    background-color: #000000;
    color: #ffffff;
    border-bottom: 3px solid #A29161;}}

 @media(max-width: 499px){.block.block--category.block--category16 .block-container .block-header {background-repeat: repeat-y;
    background-color: #000000;
    color: #ffffff;
    border-bottom: 3px solid #A29161;}}

/**********/

.p-nav
{
   height: 50px;
}
 
Upvote 0 Downvote
In your extra.less try removing this (it's about a 1/5th of the way down:

CSS: 
.p-header-logo.p-header-logo--image img {
    vertical-align: bottom;
    max-width: 70%;
    max-height: 200px;
}

Save it, then do a ctrl f5 and see if your logo stays at the correct size.
 
Upvote 0 Downvote
Lawrence said:
In your extra.less try removing this (it's about a 1/5th of the way down:

CSS: 
.p-header-logo.p-header-logo--image img {
    vertical-align: bottom;
    max-width: 70%;
    max-height: 200px;
}

Save it, then do a ctrl f5 and see if your logo stays at the correct size.
Click to expand...
I've deleted it but still get the issue :(
 
Upvote 0 Downvote
interforo said:
I've deleted it but still get the issue :(
Click to expand...

Now you have the opposite issue, when I checked. The logo is at the image size (now larger) and then is reduced to the size you want. That may be because the css is loading slower due to other things being loaded in the background? If so, maybe just resize your logo from 272 x 90 to 252 x 83. Just one idea.
 
Upvote 0 Downvote
Lawrence said:
Now you have the opposite issue, when I checked. The logo is at the image size (now larger) and then is reduced to the size you want. That may be because the css is loading slower due to other things being loaded in the background? If so, maybe just resize your logo from 272 x 90 to 252 x 83. Just one idea.
Click to expand...

I did exactly what you recommended but I still get that "movement" on the logo when the page loads :(
 
Upvote 0 Downvote
At least it doesn't resize, :) The reason for the movement now is the original header height is 95px, and then it gets changed to 120px, and the logo re-positions itself accordingly. Try adding a height attribute to style properties->your style->Header and navigation->Header/logo row->Freeform css/less code. height: 120px; the 120px may have to be adjusted by a few px either way, but you should get it by trial and error.
 
Upvote 0 Downvote
Lawrence said:
At least it doesn't resize, :) The reason for the movement now is the original header height is 95px, and then it gets changed to 120px, and the logo re-positions itself accordingly. Try adding a height attribute to style properties->your style->Header and navigation->Header/logo row->Freeform css/less code. height: 120px; the 120px may have to be adjusted by a few px either way, but you should get it by trial and error.
Click to expand...

I tried: deleting height: 120px;
putting it at either 200px, 118, 100, but still I get that weird movement

At least now no resize.
However would be nice to get rid of it

Thank you for your help
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

P
An error occurred while moving the theme. It looks like there is a problem with the photo album system?
Replies
0
Views
60
pomelosky
P
fos
  • Question Question
XF 2.3 Banner / logo problem
Replies
2
Views
54
fos
fos
frm
Error on posting after leaving page with the "loading" bar going (5+ seconds)
Replies
0
Views
27
frm
frm
Amana.Interiors
  • Solved
XF 2.2 how i can change the logo in header
Replies
1
Views
277
Mr Lucky
Mr Lucky
FoP
SEO problem with DuckDuckGo
Replies
12
Views
227
FoP
FoP
Back
Top Bottom