I need a little help with a little piece of CSS , please

Classic Stacks
1

Hi All, i have Footer in a 3 column stack with several headers and links i would also like the text colours, font size and background color to be different to the themes default color/size

I have several CCS stacks, including JW’s CSS Box and a few others, but i have to admit i am stuck, i cant recall what i have to type into the stack and the Page inspector/HTML Code/CSS space.

I think mainly my trouble is knowing/remembering/understanding what the terms Class and ID mean and where they should be used.

Tim

2

Tim - as always a URL is necessary for us to help. :slight_smile:

3

sorry buddy, i havent dared to publish it yet, but if you insist i can give it a go, afterall it is no doubt easier for you chaps to help me with it published :slight_smile:

Tim

4

I know how that is, but really we can’t help without knowing at least what theme you’re using. Some themes have specific settings for footer colors. But yes it would be much easier to help if we could see the page.

1 Like
5

http://timmytoad.org/test/

I am using Nick Cates Lunar theme, initially i didnt like the Menu, so i managed to disable that easy enough, i will eventually use the “overlay menu” from 1LD

I got the idea of using this page as a basis for my current project, including the footer LOL
http://tinyurl.com/l9mku45

Tim

6

Tim, Lunar is actually made by Elixir, not Nick Cates.

In the Options page for Lunar there are apparently controls for the footer text and link colors: https://elixirgraphics.com/previews/lunar/options/ Look for “colors” there.

Not sure if there are controls for footer font size and background color, but if there are it’s always good to use the theme option controls. After checking the theme options maybe you can republish and we can take it from there?

1 Like
7

@thang Of course Elixir not NCD thanks for spotting that.

OK thanks for that suggestion, i will have a fiddle with the built in options :slight_smile:

Tim

8

Hi Tim,
As @thang says - try setting it in the theme first.

However if you want the footer links different from the other page links and because they are in Paragraph Pro stacks you can set the Style setting to Custom you can define the link colours (normal and when hovered).

If you want them all to be the same, you could just make a partial of a P Pro stack and use it for all the ones in the footer. Same goes for the text sizing if you want that different (in the Type Setting settings group).

2 Likes
9

As @thang points out, the theme has specific controls for the Footer section of the page:

You can adjust them on a page-by-page basis or in the Master Styles.

1 Like
10


Thank you @Elixir Adam, yeah i found the options easy enough.
But now, what i see in RW is different to what i have in my browser LOL.
I have done the basic things, like deleting the file via FTP, checked it isnt PHP and republished and refreshed several times, but still they are different ! when they should be the same !

I may still need to use CSS because i think the heading should be Bold for example and i fancy a gradient for the background

Tim

11

@tav yeah i have just read your helpful reply, i thought i would have more options than normal using BWD stacks LOL.

Tim

12

But now, what i see in RW is different to what i have in my browser Lol.

Perhaps it is cached within your browser still. I say that because I see it just fine here:

Screen Shot 2017-03-19 at 4.30.45 PM.png1392×1225 403 KB

13

Thanks Adam, you are spot on, i just cleared Browsing Data and i have the correct version of the page, THANKS. i would have thought that simply RELOADING would have been sufficient.

Tim

14

@Elixir Hi Adam, i am getting there, thanks for your assistance, but sadly i am not out of the wood yet.

I dont seem to be able to get the footer background colour, which is inside an EC “5” stack, to cover the whole footer area.

I guess it is a very simple solution, but i cant figure it out.

15

You’re changing the background of something placed inside the footer section of the theme. You’re not changing the footer itself there. The footer itself is changed with the settings I showed above.

16

Thanks Adam, so i cant do anything to get the Themes Footer to be inside the Extra Content area, and have the gradient colour right across the page ?

tim

17

No, you cannot do what you’re describing. You can’t wrap the theme’s internal footer div inside of a stack.

18

Fair Enough, thanks.

Tim

19

Tim,
you can try to override the CSS:

footer#site-footer {
background: #8e8e8e; /* Old Browsers */
background: -webkit-linear-gradient(top,#8e8e8e,#d6dde3); /*Safari 5.1-6*/
background: -o-linear-gradient(top,#8e8e8e,#d6dde3); /*Opera 11.1-12*/
background: -moz-linear-gradient(top,#8e8e8e,#d6dde3); /*Fx 3.6-15*/
background: linear-gradient(to bottom, #8e8e8e, #d6dde3); /*Standard*/
}

To pick your colors to use try a site like:

Cut and past between:

  footer#site-footer {


}
1 Like