Community Forums › Forums › Archived Forums › Design Tips and Tricks › Centralising logo when using a header right widget (simple social icons)
- This topic has 2 replies, 2 voices, and was last updated 7 years, 1 month ago by Hannah P.
-
AuthorPosts
-
March 20, 2017 at 3:29 pm #203499Hannah PMember
Hi!
I'm just putting together a church website using Wellness Pro. It's been a while since I used wordpress and customised things so just trying to recollect how to do everything!I have a small logo, at theme's recommended size of 600x160. This was in the centre (as per the demo) which I like. I then added simple social icons to the header right widget area. This then left aligned the logo on a large screen (on a small screen it remains centralised, and puts the simple social icons on the next line). As I am only using three of the small icons, there is plenty of space to have the logo central and the icons to the right. I would like to bring back the logo to the centre on all size screens. I am happy whether the icons are on the same level (1st choice), or if they are moved down one line (2nd choice). I am guessing that I will either have to use CSS to force centralise the logo, or decrease the width of the header right widget area, or both.
So my first question is, should I add CSS in the WordPress Dashboard/Appearance/Customise/Additional CSS. Or should I edit the stylesheet (and if so how do I find it - the one under WordPress Dashboard/Appearance/Editor seems to be style.css, but using Inspect I might need to find style-front.css).
Secondly, which way would you recommend getting the logo centralised? Has anyone else done this? I can't put up the URL as its hidden under a maintenance mode. But I'm setting it up exactly like the demo, just with these three icons added in.
Thirdly I also want to consider changing the shape or colour or transparency of the text box over the front page widgets 1/3/5. It is currently white with cut-off corners. I think it might be something to do with the class widget-wrap?? Has anyone done anything with this box and could give some advice?
Thanks for your time.
March 21, 2017 at 7:36 am #203530Victor FontModeratorSee if this helps: https://victorfont.com/understanding-genesis-framework-site-header-layout/
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?March 21, 2017 at 8:27 am #203537Hannah PMemberHi!
Thanks so much for the link - it explains a lot of things really clearly. Before I saw it I had been playing for many hours to try and figure things out. I'll put here the answers to my own questions in case it helps anyone else - and if I've done anything daft please let me know!1. I put the CSS in the 'additional CSS' part of appearance/customise as this seemed most straightforward and prevented me changing something I shouldn't.
2. I add the following CSS there which does seem to have had the effect of re-centralising the image. I made the header-right area really small (as it only needs to hold three mini icons) and then removed the float that had appeared for the logo:.title-area { float: none; } .site-header .header-widget-area, .site-header .widget-wrap, .site-header .simple-social-icons, #simple-social-icons-2 { width: 150px; }
3. As I had wanted a semi-transparent box, without having transparent text on top, I used RGBA colours. I needed to also do this to the before & after parts to deal with the extra cut off bits of the box. Not entirely sure what I'll do if I don't want these extra corners - I could maybe make them completely transparent - but that doesn't sound elegant. But for now the following is working for me:
.image-section .widget-wrap { background: rgba(255, 255, 255, 0.5); } .image-section .widget-wrap:before { border-bottom-color: rgba(255, 255, 255, 0.5); } .image-section .widget-wrap:after { border-top-color: rgba(255, 255, 255, 0.5); }
Thanks again.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.