A few tweaks to my blog…

  • Author
    Posts
  • #112081

    enzo532blog
    Member
    Original poster

    Hi there binarymoon,

    A few years ago you very helpfully gave me some css code to help me add my blog logo as a banner to the top of Kent. It has been working really well all this time! Here’s all my css:

    #main article .entry a {
    	font-weight: bold;
    }
    
    .branding {
    	text-indent: -999em;
    	background: url('https://inthebackofthenet.files.wordpress.com/2017/06/logo.png') no-repeat left top;
    	background-size: contain;
    	height: 150px;
    }
    
    .entry, .excerpt, .comment-content {
    	font-size: 18px;
    }
    
    h1.logo {
    	font-size: 130px !important;
    }

    Now I am doing a rebrand and want to change the logo. In the customiser, I am changing the url in the css from the old logo to the new one (https://inthebackofthenet.files.wordpress.com/2017/06/logo.png) and changing 200px to 150px to make it a bit more appropriately sized. Here’s how it looks on desktop:

    https://inthebackofthenet.files.wordpress.com/2017/06/untitled.png

    That’s great except on mobile for some reason the different shaped logo is creating a big gap between it and the first post:

    https://inthebackofthenet.files.wordpress.com/2017/06/untitled1.png

    Is there a way to fix that with css? It looks fine on tablet.

    Two more tweaks I’m keen to make if possible…

    Is it possible to override the theme’s wish to make the colour of my headings darker than the logo? I am using the same hex code as the sky blue in my logo (#40ade6) as the colour for my headings but as you can see above they are coming out a darker shade.

    Also, as I am playing around with the heading fonts to try to get one that matches the one in my logo, I’m wondering is there a css to make the post titles all caps? That might make Bree look closer to the mark…

    Sorry there’s a lot here. I really need to learn css for myself…

    The blog I need help with is: in-the-back-of-the.net

    #112182

    binarymoon
    Theme Author

    Hi there – great to see you’re still using Kent! :)

    To fix the heading size on mobile you should remove the following:

    h1.logo {
    	font-size: 130px !important;
    }

    This will make the logo smaller. then change .branding to this:

    .branding {
    	text-indent: -999em;
    	background: url('https://inthebackofthenet.files.wordpress.com/2017/06/logo.png') no-repeat left top;
    	background-size: contain;
    	height: 0;
    	padding-bottom:29%;
    	display: block;
    	width: 100%;
    	max-width: 200px;
    }

    Change the max-width to match the size you like best. The logo will then scale appropriately on small devices.

    To update the post (and widget, and comments) titles to match your logo colour and be uppercase you can use:

    #main .posttitle, #main .posttitle a, #main .archive-pagination a, .writer h3, h3#comments, .widgettitle, .widgettitle a {
    color:#40ade6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    }

    I also added some letter spacing since that’s a good thing to do with all caps text since it makes it a bit easier to read.

    #112184

    enzo532blog
    Member
    Original poster

    Hi again,

    Yep, Kent is brilliant! No other theme fits my needs so well – balancing clean easy reading with the ability to show off my best photography in the rotating headers.

    That css mostly does the trick. Looks great in mobile and tablet. Only problem is now the gap on desktop looks a bit bigger than it should be:

    https://inthebackofthenet.files.wordpress.com/2017/06/untitled2.png

    Is there a fix for that?

    As for:

    h1.logo {
    font-size: 130px !important;
    }

    – That was making the whole logo ‘clickable’ so you could navigate back to the homepage by clicking the masthead. Is there a better way of achieving the same thing? When I take it out you only get a very narrow area of clickability at the top.

    Colour looks great! I took the caps out because it didn’t look right. Great to have been able to try that though.

    Thanks so much for all your help!

    #112216

    binarymoon
    Theme Author

    If you replace the h1.logo code with this:

    h1.logo, h1.logo a {
    height: 100%;
    }

    then it should be clickable.

    The margin thing on the logo isn’t ideal. I would suggest tweaking the padding-bottom on .branding value until it looks good in all situations.

    #112220

    enzo532blog
    Member
    Original poster

    Sorry but that’s not working at all. Only difference it makes is the thin strip of clickable area along the top disappears completely.

    #112221

    enzo532blog
    Member
    Original poster

    The margin thing does seem to be able to be minimised by playing around with those values though, so thanks for that.

    #112235

    binarymoon
    Theme Author

    Are you able to set the changes live so I can see what you’re working with currently? Alternatively if you could paste the updated css here then I can reproduce what you have and test the changes properly.

    #112237

    enzo532blog
    Member
    Original poster

    I don’t want to set it live until it’s all looking right and I am ready to launch the new branding but here’s all the css as I’ve been playing with it:

    #main article .entry a {
    font-weight: bold;
    }

    .branding {
    text-indent: -999em;
    background: url(‘https://inthebackofthenet.files.wordpress.com/2017/06/logo.png’) no-repeat left top;
    background-size: contain;
    height: 0;
    padding-bottom:29%;
    display: block;
    width: 100%;
    max-width: 700px;
    }

    .entry, .excerpt, .comment-content {
    font-size: 18px;
    }

    #main .posttitle, #main .posttitle a, #main .archive-pagination a, .writer h3, h3#comments, .widgettitle, .widgettitle a {
    color:#40ade6;
    }

    h1.logo, h1.logo a {
    height: 100%;
    }

    #112239

    enzo532blog
    Member
    Original poster

    Ideally I’d like the logo to be smaller on desktop but going big seems to be the only way to fill the space so it works across the three device types without any big gaps.

    #112247

    binarymoon
    Theme Author

    No problem – just having the actual css helps a lot :)

    I would switch the css to this – it seems to do what you want.

    #main article .entry a {
    font-weight: bold;
    }
    
    #main header {
    	padding: 0;
    }
    
    .branding {
    	text-indent: -999em;
    	background: url('https://inthebackofthenet.files.wordpress.com/2017/06/logo.png') no-repeat left top;
    	background-size: contain;
    	height: 0;
    	position: relative;
    	padding-bottom:15%;
    	display: block;
    	width: 100%;
    	max-width: 700px;
    }
    
    .entry,
    .excerpt,
    .comment-content {
    	font-size: 18px;
    }
    
    #main .posttitle,
    #main .posttitle a,
    #main .archive-pagination a,
    .writer h3, h3#comments,
    .widgettitle, .widgettitle a {
    	color:#40ade6;
    }
    
    h1.logo,
    h1.logo a {
    	position: absolute;
    	top: 0;
    	right: 0;
    	left: 0;
    	bottom: 0;
    	display: block;
    }
    #112248

    enzo532blog
    Member
    Original poster

    Perfect, that’s working great now. Thanks so much for all your help! :-)

The topic ‘A few tweaks to my blog…’ is closed to new replies.