Community Forums › Forums › Archived Forums › Design Tips and Tricks › Magazine Pro – help with tweaks.
- This topic has 13 replies, 3 voices, and was last updated 9 years, 11 months ago by Lauren @ OnceCoupled.
-
AuthorPosts
-
May 6, 2014 at 12:08 pm #103869jourdainMember
Hello fine people, I have a couple of questions that I was hoping you could help me with, with mostly relating to the large header image I have opted for on my site. (Size = 1440 x 400).
Link: http://creativefreaks.co.uk/
1. How can I remove the header image link which currently takes you to the homepage?
2. I would also like to only display the image on the home page and removed for all other pages/categories.
3. Would it be possible to add a tagline, maybe something this length "This is some tagline text for the homepage", that is over the image. (See below for example)
I Would also like to change the the second navigation on the page (Tutorials, Inspiration, Articles, Featured, Creative) to full width and sticky at some point. I just wanted to highlight this as it may affect your suggestions.
Thanks in advance to any replies.
Jourdain
May 6, 2014 at 12:36 pm #103880Lauren @ OnceCoupledMember1. I would do this by changing some of the CSS styles. I'd make the background image apply to
.title-area
or.site-title
rather than.site-title a
. Then you can basically hide the link while the image appears.2. Use
.home
before your selector, then code a second one without it that doesn't have the background image or height. So you may have.home site-title { background-image: url; height: 400px; }
then .site-title { background-image: none; height: 0; }`3. Yup, just code
.site-description
and remove theheight: 0;
andtext-indent: -9999px;
from it. You'll need to do some additional styling to get it over the image, which will depend on weather you use.title-area
(probably will needmargin-top
to be positive) or.site-title
(in which case negative margin-top ).That's a basic overview, it should at least get you on the right track to look up more information if you need to. 😉
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 6, 2014 at 2:12 pm #103891jourdainMemberAmazing! I will try this later. Also do you have any thoughts on making the second navigation sticky and full width, 100% of the browser?
Thanks again!
Jourdain
May 6, 2014 at 3:01 pm #103898Lauren @ OnceCoupledMemberTo make it full width:
.nav-secondary .wrap { border-top: 1px solid #222; border-bottom: 1px solid #222; max-width: 100%; padding: 0 20px; margin-top: -1px; }
To make it sticky, you'll want to use some jquery. Here's a good starting point:
http://sridharkatakam.com/displaying-fixed-navigation-menu-upon-scrolling-genesis/
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 6, 2014 at 3:51 pm #103919jourdainMemberI have added the code like you mentioned, the code snippets are displayed below incase anyone else needs them in the future:
.site-title a{ display: none !important; }
.home .site-title { font-family: 'Raleway', sans-serif; font-size: 48px; line-height: 1; margin-bottom: 0; background: url(http://creativefreaks.co.uk/wp-content/uploads/2014/05/1140x400.gif) no-repeat !important; height: 400px; }
I do still have one problem in relation to the tagline text. If I code it the way you have suggested then where will I type the physical text. I'm not sure if I am being a total idiot or have missed your point.
Jourain
May 6, 2014 at 4:00 pm #103923Lauren @ OnceCoupledMemberAh, that will be in your WordPress settings. Settings > General >Tagline. 🙂
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 6, 2014 at 4:13 pm #103933jourdainMemberAmazing, thanks for your help with all this. Just added the code you suggested to make the menu full width. I had to add a media query to make it look ok in the responsive design.
While we are on a roll with css I am also trying to get the top menu to look like the menu displayed on WordPress explorer.
Link: http://www.wpexplorer.com/So the Site title is displayed on the left with log and all other items on the right. Do you have any pointers?
Jourdain
May 6, 2014 at 4:40 pm #103942jourdainMemberI'm am having trouble with the tagline. Please could you assist me with the CSS. Sorry be cheeky and keep asking 🙂
Jourdain
May 7, 2014 at 1:41 am #104020NatMemberJourdain - Sorry for butting in. Just want to ask which plug in you are using for related posts?
May 7, 2014 at 6:05 am #104038jourdainMemberI didn't use a plugin, I followed this tutorial http://designsbynickthegeek.com/tutorials/related-posts-genesis and then added some styling with CSS.
Hope this helps you.
May 7, 2014 at 10:57 am #104070Lauren @ OnceCoupledMemberNav: remove the width from the UL and float it right. I'd use a background image aligned
left center
to add the logo. Will need to pay attention to mobile responsive functions when making these changes.Tagline/Site description: have a look at #3 in my first response. You need to remove the
height
andtext-indent
from anywhere referencing your.site-description
(so that it will appear) and then apply the CSS styles that you want it to have.
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 7, 2014 at 12:42 pm #104080jourdainMemberThanks for your help, I now have the tagline displayed and the navigation
li
elements aligned where I would like them.I have a couple more questions, if you have any patience left:
1. When the menu item is hovered the background image will be removed/hidden. Is there a way to prevent this?
2. Also I would like to move the text (Home) over to the right so that it is not overlapping the background image. For some reason I can't find the correct selector and CSS. Having a dumb moment 🙂
Thanks again for your help with my customizations, it really is appreciated.
Jourdain
May 7, 2014 at 1:43 pm #104082jourdainMemberI have worked it out now. Link if you would like to see: http://creativefreaks.co.uk/
Jourdain
May 7, 2014 at 4:31 pm #104090Lauren @ OnceCoupledMemberGlad you got it worked out! 🙂
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.