Little tweaks to suit our brand

A few little tweaks to finalise the design for magazine site using newsmag.
I’m using Newsmag and it’s got some really excellent features, I know I’ll be recommending it when this project is done!

1.Header Style
There are lots of really great options for the layout of the header, but I seem to need the only combination that’s not available. Style 7 gets close, but I’d like the top and main menu colours to go full width. Style 10 gets closer but the logo area is too deep.
IS it possible to have this tweak with some CSS?:
Full width top menu, full width main menu, centered logo with depth thats the same Style 7.

2.Social media buttons
I have these in the top menu and in the sidebar. Social connections are going to be really important for this site, so we’d love to have these quite a lot bigger. Can the social follow links be made bigger?
And is it possible to have the social share buttons use the same style, rather than those blocks

3. Category layout, article list
I’m using block 12 to show my list of latest posts when i need to add extra lists of articles and the M8 and M11 styles for category pages. I’d love to add a 1px line between each post so that they are a bit more seperated.

4. Mega Menu settings
I’d like to add some variation in the mega menu layout. Is it possible to use a premium mega menu plugin to add different contents to each column or would this cause errors with the theme? OR are there options that I missed within the theme? A sample of how I’d like the menu to look here:
http://theeverygirl.com/ Text column + recent post featured image + top articles

5. Article titles in Big Grid
The gradient really helps to improve the readability of the article title, but is it possible to have the text appear in a box instead, with maybe an opacity so the the image still shows through? The box would have to respond to the length of the title. Again, they do this on http://theeverygirl.com/

I’d really appreciate your support on this. I’d like to stick with the newsmag theme!
Thanks in advance 🙂
Claire

Hi

1. You can use header style 10 and remove the margins around the logo with custom css:

.td-header-style-10 .td-header-text-logo{
margin:0;
}
The result should be like here: http://screencast.com/t/KwPqcFjUGGvl

2. The size of social icons from top menu and footer can be changed using custom css: http://screencast.com/t/Qjtloicy3L

.td-social-icon-wrap i{
font-size: 18px;
width: 30px;
height: 30px
}

You can modify this values as you like.

3. To add the line between post

-in block 12 use this custom css: http://screencast.com/t/RgwLycBvzygI

.td-block-span12{
border-bottom: 1px solid black;
margin-bottom: 35px;
}

-in module 8: http://screencast.com/t/h5AM7N0Qp

.td_module_8 .item-details{
border-bottom: 1px solid black;
}

-in module 11: http://screencast.com/t/6UTSJvxMQAeT

.td_module_11{
border-bottom: 1px solid black;
margin-bottom: 35px;
}

4. We didn’t tested any plugin for that request so I can’t recommend one, this is the theme’s mega menu https://forum.tagdiv.com/menus-newsmag/ which you can use, but if you need another appearance for it you can look for a plugin.

5 For the big grid title you can use this css: http://screencast.com/t/ltBUOngPS8at

.td-big-grid-post .entry-title a{
background-color: red;
display: inline-block;
opacity: 0.8;
}

You can change the color and opacity as you like.

Thanks!

Hi,

I tried doing the line below module 8 but now it shows 2 lines the earlier one as well as the black one

pls check
http://www.theindianpanorama.com/travel#.VbW6AHiYZVv

Hi

Please add this css in theme panel > custom css:

.td_module_8.td_module_wrap{
border-bottom: 0px;
}

Thanks!

Hi again,

On point 2. (Social media buttons to be bigger)
The code you provided worked perfectly for the header, but the footer and sidebar icons are still the same size. They’re added via Appearance > Widgets to the sidebar and footer using Jetpack Media Icons. Jetpack seems to be pulling in the styled theme icons which is great, but is there a different way to do this to have control over their size.

Thanks so much!!
C

Hi

We haven’t tested the Jetpack Media Icons plugin with the theme, if possible please provide a link because I need to inspect this in order to provide an accurate answer.

Thanks!

Hi,
I’m afraid I can’t provide the URL or login at this time.

Is there another way to add social media links to the footer and side bar? And have them appear at the larger size?

Sorry if that’s a really silly question! I just cant seem to find an option for it in the theme panel!

Thanks
C

Hi

You can use a footer template that have the social icon included: http://screencast.com/t/umebpftr5Q and apply this css to modify their sizes:

.td-social-icon-wrap i{
font-size: 18px;
width: 30px;
height: 30px
}

The theme doesn’t have an option to ad social icons in sidebar area, sorry, those are available only on header and footer, if you need other customization on this regard please consult or hire a freelancer or a developer from a site like studio.envato.com

Thanks!