Docs

[quituck]

Hi,
I’m in need of a bit of assistance to set up my footer column

1.) How to a add a page link to the footer?
2.) How do I add my logo image?
3.) How do I change the background color?
4.) How do I change the height of the widget footer?
5.) How can I adjust the width/spacing of the columns?

Thank you

[quituck]

This reply has been marked as private.

[Joao]

Hi There,

1) You can add to the text widget a html link for example :<a href="http://rastaverse.com/blog"> Blog </a>

2) You can add to the text widget :<img src="//rastaverse.com/wp-content/uploads/2016/12/imageedit_15_4711655296.png" alt="Peace and love for all humanity">

3) Add the following code to Appereance > customizer > custom > CSS

.x-colophon.top {
    background: red;
}

4) If you are referring to the modal you added to the footer widget, sincerely I believe would be the best to remove, it is way to big to the area, I recommend you using X Email Forms Instead to collect Emails.

5) Yes it could be possible but will affect the other columns, please provide more detailed information of what you want to achieve in order that we can help, but I believe if you follow the suggestion on 4) it would not be necesaary.

Hope that helps

Joao

[quituck]

Thank you.

3 more questions
1.) How do I change the footer text widgets color, font, & size?
2.) How do I change the text spacing so my text is closer together vertically?
3.) How can I make my covert-plug opt-in widget just a text box and button? Similar to the form in the footer on this site https://www.leafly.com/

Thank you

[Joao]

1)

.h-widget {
    color: red;
    text-shadow: none;
}

.widget {
    color: green;
    text-shadow: none;
}

.widget a  {
    color: blue;
}

.widget a:hover  {
    color: pink;
}

2)

.widget a, .widget p  {
margin: 0px;
}

3- Create a Modol that is proportional to the space you have on the bottom of your site.

Remove the background color of the modal.

Hope it helps

Joao

[quituck]

Pertaining to the above.

1.) How do I change the widget text colors individually?

2.) I would like one section color to be red, one to be green, and one to be yellow.

3.) Also how can I change my covert-plug widget margins so it displays more left in my footer?

4.) Lastly I would like to know how to center my logo so the the image is a row above all the text in my footer?

Thank you for all you help so far!!!

[quituck]

In addition to my question above. Can you tell me what the other widgets are listed as? For example I was only about to adjust the margins of .widget a. I’m unable to adjust my other footer columns because I’m not sure what widget to enter for the code. Can you please advise?

Thank you

[Friech]

Hi There,

#1 & #2 Add this on your custom CSS.

.x-colophon.top .x-column.x-1-3 {
	min-height: 525px;
    margin-right: 0;
    padding: 25px;
    width: 33.33%;
}

.x-colophon.top .x-1-3:first-of-type {
	background-color: rgba(216, 0, 39, 0.5);
}
.x-colophon.top .x-1-3:nth-child(2) {
	background-color: rgba(255, 218, 68, 0.5);
}
.x-colophon.top .x-1-3.last {
	background-color: rgba(73, 110, 45, 0.5)
}

#3

@media (min-width:  768px) {
	.x-colophon.top .cp-modal-every-design .cp-text-container {
	padding: 0;
	text-align: left;
}
.x-colophon.top .cp-modal-every-design .form-main {
	max-width: 100%;
}
.x-colophon.top .cp-modal-popup-container .col-lg-12 {
	padding-left: 0;
	padding-right: 0;
}
}

#4

.x-colophon.top .x-1-3:first-of-type img {
	margin: 0 auto;
	display: block;
}

Regretfully, I am not entirely certain of your last query, please clarify.

Thanks.

[quituck]

Hi again,
I still have a few more questions

1.) You provided me code on how to have the widget area background colors, however that was not the look I was going for. I need to know how to change the color of the text. I would like have a column of red text, a column of yellow text, and a column of green text. Can you please advise me oh how to make this code changes?

2.) I would like the text to appear closer together vertically. Please see the images I have attached so can can compare my menu to an example.

3.) I would like to know how to place my logo above all other text so that the column text headers (e.g company & contact…) are all aligned evenly.

Thank you for all you help so far, I really appreciate it.

[Rue Nel]

Hello There,

Thanks for updating in!

1] To change the text colors, please use this code instead:

.x-colophon.top .x-1-3:first-of-type,
.x-colophon.top .x-1-3:first-of-type .widget,
.x-colophon.top .x-1-3:first-of-type .h-widget,
.x-colophon.top .x-1-3:first-of-type .widget a {
	color: red !important;
}

.x-colophon.top .x-1-3:nth-child(2),
.x-colophon.top .x-1-3:nth-child(2) .widget,
.x-colophon.top .x-1-3:nth-child(2) .h-widget,
.x-colophon.top .x-1-3:nth-child(2) .widget a {
	color: yellow !important;
}

.x-colophon.top .x-1-3.last,
.x-colophon.top .x-1-3.last .widget,
.x-colophon.top .x-1-3.last .h-widget,
.x-colophon.top .x-1-3.last .widget a {
	color: green !important;
}

2] To adjust the text closer, please make use of this code:

.x-colophon.top .widget p {
	line-height: 12px;
}

3] Do you want something like this?

If that is the case, you can use this code:

@media(min-width: 768px){
  .x-colophon.top .x-1-3 {
	padding-top: 135px;
  }

  .x-colophon.top .x-1-3:first-of-type {
  	padding-top: 0;
  }
}

We would loved to know if this has work for you. Thank you.

[quituck]

Its coming together. I need help with a few more changes.

1.) for my 3rd question above the code worked until I decided to change the columns background colors. Can you please help me to align to my company, contact, and subscribe text in my footer columns again?

2.) Is there a way I can change or remove the shadow on the text shadow in the footer?

3.) How can I remove the footer bottom and add my copyright to the bottom center of my footer top?

4.) The 3rd column in my footer text color is coded as green and its displaying as the color black. Please help to correct.

5.) The placeholder text for email signup form is not displaying in the footer. Please advise.

6.) Lastly how can I adjust the height of the top footer to make it smaller?

Thank you

Thank you again!

[Rue Nel]

Hello There,

Thanks for writing in!

1] To align the titles in your footer, please use this code instead:

@media(min-width: 768px){
  .x-colophon.top .x-1-3 {
	padding-top: 150px !important;
	}

  .x-colophon.top .x-1-3:first-of-type {
  	padding-top: 0 !important;
  }
}

2] To remove the text shadow, please make use of this code:

.x-colophon.top .widget {
	text-shadow: none;
}

3] You do not need to remove the footer. You can simply place the copyright at the center with a reduce space from the columns above. Please make use fot his code:

.x-colophon.top .widget {
	text-shadow: none;
}

.x-colophon.top {
	padding-bottom: 10px;
}

And you can have something like this: http://prntscr.com/dq8f78

4] To make sure that the last column will have a green color, please make use of this code:`.x-colophon.top .x-1-3.last,
.x-colophon.top .x-1-3.last .h-widget,
.x-colophon.top .x-1-3.last input {
color: #438344 !important;
}`

5] The placeholder is displaying upon checking on the page. You can check out my screenshot here: http://i.prntscr.com/d20891e266974dbc8e2f13dc6ff638c1.png

6] To minimize the height of your footer columns, please have your code updated and use this code instead:

.x-colophon.top .x-column.x-1-3 {
    min-height: 470px;
    margin-right: 0;
    padding: 25px 25px 10px;
    width: 33.33%;
}

Please let us know if this would work out for you.

[quituck]

Everything is working out well. Thank you! I have one last question.

How do I remove the space between my logo and titles? Please see the picture attached for reference.

Thank you again!

[Rue Nel]

Hello There,

Thanks for the updates and for the screenshot. To resolve this last issue, please find this block:

@media(min-width: 768px){
  .x-colophon.top .x-1-3 {
	padding-top: 150px !important;
	}

  .x-colophon.top .x-1-3:first-of-type {
  	padding-top: 0 !important;
  }
}

And update it using this code instead:

@media(min-width: 768px){
  .x-colophon.top .x-1-3 {
	padding-top: 100px !important;
  }

  .x-colophon.top .x-1-3:first-of-type {
  	padding-top: 0 !important;
  }

  .x-colophon.top .x-column.x-1-3 #text-2 {
    margin-top: 0;
  }
}

We would loved to know if this has work for you. Thank you.

[quituck]

Everything turned out great! Thank you very much for all of you help, I really appreciate it. 🙂

[Author]

Posts