Jump to content


Photo
- - - - -

Full-width Masthead

masthead full-width customization

Best Answer Danny , 13 March 2013 - 12:00 PM

Hi,

 

All sections are given a similar structure of classes which you can use to style the section.

 

For example,

 

<section ID="section-name" class="section-sectionname">

<div class="texture">

<div class="content">

<div class="content-pad">

 

You can use these classes to style the section. Now if I understand you correctly, are you wanting to have the white background of the Masthead full width ?

If so, use the following and add your style to it.

 

 
.section-masthead .texture { } 

 

If you add background-color to the code above, the result will look like this:

 

http://cl.ly/image/1L28272A0C2D

Go to the full post


  • Please log in to reply
6 replies to this topic

#1 alexisk

alexisk

    Newbie

  • Members

  • 6 posts
  • Country: Country Flag

Posted 12 March 2013 - 02:25 PM

Hi everyone,

 

I've been working on this page for a few days and almost have it where I want it to be, but I need help.

 

Please Login or Register to see this Hidden Content

, I'm trying to get the masthead to be full-width and responsive, like the other sections.

 

I'm also trying to eliminate the buttons, the masthead meta says if no options are chosen no buttons will be displayed, but that is not the case.

 

If anyone can help with this, I'd greatly appreciate it!

 

Thanks!



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 12 March 2013 - 07:42 PM

In which template area are you adding the masthead to? As for eliminating the buttons, you can use CSS to hide them:

Please Login or Register to see this Hidden Content



#3 alexisk

alexisk

    Newbie

  • Members

  • 6 posts
  • Country: Country Flag

Posted 13 March 2013 - 12:49 AM

The masthead is in the page template area along with the content boxes below it... I did figure out the button issue, as there are two places where those have to be modified on the page's meta section and also under page options.



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 13 March 2013 - 04:14 AM

Hi there, when you say you want the masthead to be full width, do you mean you want the text to fill the white content area better? Or the text to go from one edge of the browser window to the other.

 

If you want the white area to go right to the edge of the browser you'll need to use css to set the background of the Masthead to white. At the moment that area is set within the content area of the page.

 

If you want the text to fill the white area better, you'll need to use css to enlarge the font-size for the masthead title and tag.

 

If you've not used css before, check out

Please Login or Register to see this Hidden Content

which will give you an overview using css inside the framework and the tools we advise you use to find the correct elements to edit.



#5 alexisk

alexisk

    Newbie

  • Members

  • 6 posts
  • Country: Country Flag

Posted 13 March 2013 - 11:57 AM

Thanks James. I'm wanting the white section to go all the way to the edges of the page. I'm just learning CSS, trying it for the first time on this page. I'll try your suggestion of making the background white and report back.

#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 16247 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 13 March 2013 - 12:00 PM   Best Answer

Hi,

 

All sections are given a similar structure of classes which you can use to style the section.

 

For example,

 

<section ID="section-name" class="section-sectionname">

<div class="texture">

<div class="content">

<div class="content-pad">

 

You can use these classes to style the section. Now if I understand you correctly, are you wanting to have the white background of the Masthead full width ?

If so, use the following and add your style to it.

 

Please Login or Register to see this Hidden Content

 

If you add background-color to the code above, the result will look like this:

 

Please Login or Register to see this Hidden Content


  • kualabear likes this

#7 alexisk

alexisk

    Newbie

  • Members

  • 6 posts
  • Country: Country Flag

Posted 13 March 2013 - 01:05 PM

Thanks Danny, you did understand what I wanted. When I was trying the CSS myself I was putting .masthead .texture { } and nothing was happening. I appreciate the clarification about the "section" part. Have a great day!







Also tagged with one or more of these keywords: masthead, full-width, customization