Styling the Page-List block
Permalink
Hi Folks,
Am moving a site I develop onto concrete. The site is for author / artist who has really clear ideas how he wants things to look, so my template is completely custom.
Usually I don't have too many problems, but in this case I need to use the Page-list block in a custom font and at a large size.
This worked fine just by styling the main body to the font which the site uses, and by increasing text size for the div in which the page-list block lives.
However, I am finding now that the block seems to have a large margin or padding before the first item. I have tried setting the div padding and margins to 0px, I have also tried copying the class and block tags from the page-list block and zeroing those, but I'm still left with this annoying margin.
Can anyone give me a clue here?
Site iswww.www.ragsriches.co.uk/concrete...
The page list should be much closer to the main rags graphic (text level with the top of the blue banner to the right of the list).
Thanks for any help!
Am moving a site I develop onto concrete. The site is for author / artist who has really clear ideas how he wants things to look, so my template is completely custom.
Usually I don't have too many problems, but in this case I need to use the Page-list block in a custom font and at a large size.
This worked fine just by styling the main body to the font which the site uses, and by increasing text size for the div in which the page-list block lives.
However, I am finding now that the block seems to have a large margin or padding before the first item. I have tried setting the div padding and margins to 0px, I have also tried copying the class and block tags from the page-list block and zeroing those, but I'm still left with this annoying margin.
Can anyone give me a clue here?
Site iswww.www.ragsriches.co.uk/concrete...
The page list should be much closer to the main rags graphic (text level with the top of the blue banner to the right of the list).
Thanks for any help!
Hmmm...
I tried setting h3 to padding:0px in my typography.css file but that hasn't affected it. Anyone know where the page list pulls its css from by default?
I tried setting h3 to padding:0px in my typography.css file but that hasn't affected it. Anyone know where the page list pulls its css from by default?
Hello,
I don't use Typography CSS for any of my themes. Just call everything from my own CSS.
Does that help?
I don't use Typography CSS for any of my themes. Just call everything from my own CSS.
Does that help?
Hi Steev,
Within my theme files I'm using styles.css and typography.css, and pulling both into my template. So in a sense thay are both my css. However, setting attributes there for the H3 tag are being ignored by the page-list.
Within my theme files I'm using styles.css and typography.css, and pulling both into my template. So in a sense thay are both my css. However, setting attributes there for the H3 tag are being ignored by the page-list.
Adding changes to the h3 tag in /page_list/view.css file, would do the trick. You should not alter with the core concrete folder, so you could create a copy of the page_list block and save it in the same location outside the concrete folder...(yoursite/blocks/). Then you could make your changes there.
Hi Hkfoed,
I understand about not editing core blocks. I did however try as a preliminary test, adding h3 {padding: 0px;} to view.css in the core to see if it worked.
It didn't.
I understand about not editing core blocks. I did however try as a preliminary test, adding h3 {padding: 0px;} to view.css in the core to see if it worked.
It didn't.
You can style the pagelist from your main.css, try:
.ccm-page-list h3 {padding:0 !important}
or preface if with a parent div:
#page .ccm-page-list h3 {padding:0;}
.ccm-page-list h3 {padding:0 !important}
or preface if with a parent div:
#page .ccm-page-list h3 {padding:0;}
OMG!
I think you need a little help........
Why have you used page-list for links?
You have to many conflicting styles, inline, duplicates and all sorts. Try keeping it simple!
You don't need to change the colour of links when visited. Returning visitors won't see original colour.
Links don't need 'h' tags, just style them exactly how you want them in the theme CSS.
Your theme shouldn't be in concrete/packages it should be in root/themes (you don't want to mess with the core).
Your background colour is not the same as .jpg colour.
Picture blue is #9AD6F4. Background is #A4DEF6.
Possible quick fix is adding '-title' to:
.ccm-page-list h3 {padding:0 !important
font-size:20px;
}
".ccm-page-list-title"
If you need more help let me know.
I think you need a little help........
Why have you used page-list for links?
You have to many conflicting styles, inline, duplicates and all sorts. Try keeping it simple!
You don't need to change the colour of links when visited. Returning visitors won't see original colour.
Links don't need 'h' tags, just style them exactly how you want them in the theme CSS.
Your theme shouldn't be in concrete/packages it should be in root/themes (you don't want to mess with the core).
Your background colour is not the same as .jpg colour.
Picture blue is #9AD6F4. Background is #A4DEF6.
Possible quick fix is adding '-title' to:
.ccm-page-list h3 {padding:0 !important
font-size:20px;
}
".ccm-page-list-title"
If you need more help let me know.
Thanks - I went back to basics and cleaned out the styles.css file, this helped a lot!
The theme is in root/packages as it installed as a package (everything seems to install from marketplace as a package now).
I have also been doing a lot more playing - you are correct that a nav would be much better functionally than the page list block.
I'm learning as I go!
Iain
The theme is in root/packages as it installed as a package (everything seems to install from marketplace as a package now).
I have also been doing a lot more playing - you are correct that a nav would be much better functionally than the page list block.
I'm learning as I go!
Iain
The h3 tags has padding-top and padding-bottom set to 21px!!