Jump to content


Photo
- - - - -

Any tips about block with rounded corners...


Best Answer Danny , 17 March 2013 - 10:19 AM

Hi,

 

You should really use IDs for your custom CSS, as they will most likely prove to be a pain later. All sections in PageLines Framework are given a unique class for that section, this class can be found in the <section ID="" class="Here"

 

For example, if you inspect the Branding section HTML, via Firebug or your browsers built-in tools, inside the <section> tag you will see the following:

 

<section id="branding" class="container section-branding fix">

 

That is the class you should be using to target that particular section. All sections have a similar class name.

 

To use this class in your CSS, lets imagine you wish to increase the padding for the Branding section.

 

#site .section-branding .content-pad { padding: 60px; }

 

#site = This is an override to make sure your custom CSS is loaded.

.section-branding = The Sections class name

.content-pad = This div controls the padding for the section, which is by default 15px.

Go to the full post


  • Please log in to reply
8 replies to this topic

#1 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 14 March 2013 - 01:56 PM

Hi,

 

Has anybody good CSS tips how to achieve this layout which I have to rebuild: oudisnieuw[dot]net.

 

Kind regards,

 

Willem



#2 greenfly

greenfly

    Advocate

  • Members

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

Posted 14 March 2013 - 02:13 PM

Hi 0899 

 

you can find more information regarding Rounded corners and CSS here 

Please Login or Register to see this Hidden Content



#3 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 15 March 2013 - 12:01 PM

Hi, thanks Martin. 

 

I took my PageLines skills to the next level > I have now a Child Theme to create a layout like oudisnieuw[dot]net.

I'm now able to use the quickslider in my header part of the template.

 

So what's there now are two sections, check this HTML... want I trie to achieve (but I'm not getting it to work) is that both sections are next to each other (tried block displays, relative positions, floats...)

 

Please Login or Register to see this Hidden Content

 

Can anybody help me how to do this?

 

Kind regards Willem



#4 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 15 March 2013 - 12:25 PM

You can view the website at

Please Login or Register to see this Hidden Content

(dot)nl/

#5 Danny

Danny

    Is Awesome!

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

Posted 15 March 2013 - 12:26 PM

In order to do this, you will need to find the correct class, then use the following:

 

 

 

Please Login or Register to see this Hidden Content

 

Do the same for both sections, additional styling may be required but this should do the trick.



#6 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 17 March 2013 - 09:51 AM

Hi, it was neccesarry to really do some more study on CSS (absolute vs relative, block vs inline, float etc), but then I got it working. 

 

What I wonder is, I never see something like 'section-sectionname', when i look up the html I would write it like 'section#quickslider'...

How come 'section-sectionname' is also valid css?

 

Kind regards,

 

Willem



#7 Danny

Danny

    Is Awesome!

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

Posted 17 March 2013 - 10:19 AM   Best Answer

Hi,

 

You should really use IDs for your custom CSS, as they will most likely prove to be a pain later. All sections in PageLines Framework are given a unique class for that section, this class can be found in the <section ID="" class="Here"

 

For example, if you inspect the Branding section HTML, via Firebug or your browsers built-in tools, inside the <section> tag you will see the following:

 

<section id="branding" class="container section-branding fix">

 

That is the class you should be using to target that particular section. All sections have a similar class name.

 

To use this class in your CSS, lets imagine you wish to increase the padding for the Branding section.

 

#site .section-branding .content-pad { padding: 60px; }

 

#site = This is an override to make sure your custom CSS is loaded.

.section-branding = The Sections class name

.content-pad = This div controls the padding for the section, which is by default 15px.



#8 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 17 March 2013 - 10:23 AM

Thanks Danny, I had overlooked that!

Your explenation helped me.

 

Kind regards,

 

Willem



#9 Danny

Danny

    Is Awesome!

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

Posted 17 March 2013 - 10:30 AM

No problem. ;)