Ethos footer widget area center text and back ground color

Support
#1

hello, id like to do the following please:

  1. center all the top footer widget area text

  2. change the top footer widgets title color to: rgb(218, 165, 32)

  3. change the top footer widget area text to: rgb(204, 204, 204)

  4. change the top footer widget area text to hover to: rgb(218, 165, 32)

  5. change top widget area background color to: rgb(51, 51, 51)

  6. Lastly, Id like to change the portfolio layout to 3 instead of 2

url: www.harihost.com

please advise

Thank you kindly

#2

Hi There,

Thanks for writing in!
Please add this css to your theme option -> custom -> global css and let us know how this goes.

.x-colophon.top {
  background: rgb(51, 51, 51);
}

.x-colophon.top .h-widget {
color: rgb(218, 165, 32);
}
.x-colophon.top .widget ul li a:hover, .x-colophon.top .widget ol li a:hover {
color: rgb(204, 204, 204);
}
color: rgb(218, 165, 32);
}

For portfolio please dit the portfolio page and set your column to 3.

Hope this helps!

Thanks

#3

thank you very much!

exactly what i wanted.

with the exception of centering the top widget text.

#4

Hi there,

Do you mean you want to center the block titles? If so, please update this code:

.x-colophon.top .h-widget {
    color: rgb(218, 165, 32);
}

to

.x-colophon.top .h-widget {
    color: rgb(218, 165, 32);
    text-align: center;
}

Hope this helps.

#5

yes we are closer to the desired result.

id also like to center the text below the titles please.

thank you

#6

Hi there,

Please add this code:

footer .widget ul li, 
footer .widget ol li,
footer .textwidget {
    text-align: center;
}

Hope this helps.

#7

it did not :frowning:

#8

The code previously provided should work fine not unless there are CSS errors in the codes you have in the custom CSS panel.

Please check for CSS errors using this: http://csslint.net/

Hope this helps.

#9

this is what i have

.x-topbar .p-info, .x-topbar .x-social-global a {
color: rgb(153, 153, 153);
}
.x-social-global a:hover {
color : goldenrod !important;
}
.x-colophon .x-social-global a {
color: goldenrod;
}
.x-colophon.top {
background: rgb(51, 51, 51);
}

.x-colophon.top .h-widget {
color: rgb(218, 165, 32);
text-align: center;
}
.x-colophon.top .widget ul li a:hover, .x-colophon.top .widget ol li a:hover {
color: goldenrod;
}
color: rgb(218, 165, 32);
}

would you mind reviewing it for me please

#10

Hi there,

This seems to be causing the new CSS not to work:

Kindly correct it and make sure that the CSS code you add has the correct syntax.

Thank you.

#11

all fixed, just removed said css

thank you kindly

#12

You’re most welcome, Joshua.

#13

may i trouble you to help with another request please?

Id like to add a background image to the Top Bar

just like my top footer area:

thank you kindly

#14

Hi There,

Please find this custom CSS:

.x-colophon.top {
    background: url(http://www.harihost.com/wp-content/uploads/2018/02/use_your_illusion.png);
}

And change to this:

.x-topbar, .x-colophon.top {
    background: url(http://www.harihost.com/wp-content/uploads/2018/02/use_your_illusion.png);
}

Hope it helps :slight_smile:

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.