Jump to content


Photo
- - - - -

Moving highlight area


Best Answer Danny , 01 May 2013 - 12:56 PM

That because you still need to change it, it was an example.

 

You need to replace .section-sectionname with the highlights section- class.

 

such as:

 

section-highlight.

 

However, you will probably want to only set the padding top to 0. You may also need additional CSS. That is why I am recommending you use inspect the CSS with firebug/browsers built in web dev tools, I suggest Chrome, in my opinion its the best.

 

There is a free course on Code school which will learn you the fundamentals and there is also a step by step guide on our custom CSS documentation.

Go to the full post


  • Please log in to reply
11 replies to this topic

#1 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 01 May 2013 - 12:03 PM

Hi,

 

I want to move my highlight area from my website test.propertywealthadvisors.com.au

 

I used this css code:

 

 

#highlight {
  1. padding4px 0 10.5px;
}

 

but when i go into the negatives it stops moving, when i increase the px it goes further down which i dont want.

 

I would if possible like the highlight css code to reflect on all pages as well

 

on the homepage i would like it to sit close underneath the features banner and on the other pages i want it to fit level under the sidebar



#2 Danny

Danny

    Is Awesome!

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

Posted 01 May 2013 - 12:15 PM

Hi,

 

You currently have the Highlight section in the Morefoot template area, I recommend you move the highlight to the Page template area. The reason I suggest that is, the page class has a min-height in place of 400px, this is what is causing the gap between your features section and the highlight section.

So if you move the highlight to the page template area, it will be easier to position. If you prefer the highlight section in the morefoot area, then you will need to use custom CSS to reduce the page min-height for that page.

 

To this, on this page only, you can use the special body class for that page. To find this class, inspect your page using Firebug or your browsers web dev tools. It will look something like this:

.page-id-10

You can then use this in your CSS to reduce the min-height that is applied to the dynamic-content ID. However, the CSS for this already contains a number of IDs so overriding it may be difficult.

 

So in my opinion, the best course of action is to move the highlight section to your page template area or add more content to that page, so that the min-height of 400px is no longer an issue.

 

One other alternative is to use different page templates for your pages. For example, your homepage would use template | default and the rest of your sites pages would use template | 1.



#3 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 01 May 2013 - 12:19 PM

Hi Danny,

 

I moved the highlight section, but looks like it only worked from home page, so does that mean for the other pages i will need to do custom css? i.e. min-height: Xpx



#4 Danny

Danny

    Is Awesome!

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

Posted 01 May 2013 - 12:29 PM

No, if the homepage looks fine, which it does as far as I can tell. You will now need to use custom CSS to reduce the padding for all your other pages. Following the instructions that I mentioned above.

You need to use remove the padding on the highlight section that will reduce the gap.



#5 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 01 May 2013 - 12:36 PM

Danny, the only padding i see is the following:

 

 

#highlight .content-pad .highlight-area {
  1. padding21px 0 10.5px;
}

 

 

but cannot find it in my css sheets



#6 Danny

Danny

    Is Awesome!

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

Posted 01 May 2013 - 12:40 PM

The CSS is not correct:

 

You need to have it like this,

 

 

Please Login or Register to see this Hidden Content

If you're adding custom CSS, then do as our custom CSS documentation tells you and use an override. Also, do not use IDs, use the class for the section instead, along with an override.

 

Please Login or Register to see this Hidden Content

 

Please bear in mind that we are unable to provide you the custom CSS needed to achieve your layout. I recommend you use Firebug or your browsers web dev tools, if you're not comfortable with these tools, please check out this free course.

 

Please Login or Register to see this Hidden Content



#7 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 01 May 2013 - 12:46 PM

I added the following:

 

 

#site .content .content-pad, 
#site .highlight .highlight-area {
padding: 0 !important;
}

 

 

but it moved the highlight section closer to the boxes which i don't want. i want the highlight section to move up



#8 Danny

Danny

    Is Awesome!

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

Posted 01 May 2013 - 12:48 PM

That because you haven't done what I said, you have added this:

 

#site .content .content-pad,

 

You're now changing the padding throughout the site, my code above targets the content-pad for the highlight section only. We are unable to provide custom CSS code, if you're still struggling to move the highlight section. I recommend you contact one of our Pros.

Or have a look at the web dev tools free course.

 

Please Login or Register to see this Hidden Content



#9 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 01 May 2013 - 12:50 PM

I copied your exact code and still doesn't work:

 

 

#site .section-sectionname .content-pad,
#site .section-sectionname .highlight-area {
padding: 0;
}


#10 Danny

Danny

    Is Awesome!

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

Posted 01 May 2013 - 12:56 PM   Best Answer

That because you still need to change it, it was an example.

 

You need to replace .section-sectionname with the highlights section- class.

 

such as:

 

section-highlight.

 

However, you will probably want to only set the padding top to 0. You may also need additional CSS. That is why I am recommending you use inspect the CSS with firebug/browsers built in web dev tools, I suggest Chrome, in my opinion its the best.

 

There is a free course on Code school which will learn you the fundamentals and there is also a step by step guide on our custom CSS documentation.



#11 designpoint

designpoint

    Advanced Member

  • Members
  • 59 posts
  • Country: Country Flag

Posted 01 May 2013 - 01:13 PM

yeah read the css documentation but limited knowledge on section areas. i looked at the images and tried to relate it to my project, executed the code and it has come closer to the boxes



#12 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 01 May 2013 - 01:16 PM

Adrian - thanks for letting us know.