HTML in about & footer section

Illdy
1

Hi, I’m actually looking for a way how can I add custom html code to the #about and #footer sections on the static front page. These have to be just a small changes, like adding a clickable link, making unordered list or some stuff like that. As I noticed, when I add html to the about, it shows as it should be in admin preview page, but after saving and publishing, the page for visitors is shown without these html codes. So is there some fix for this? Thanks :slight_smile:

2

Hello @pa3kson,

If I understand correctly, you should use text widgets to handle your code.

If you already did this, please provide a couple of screenshots so I can better understand what is going on.

Regards

3

Hi, thanks for the reply, however I’m not entirely sure about text widgets you recommended. I’m not currently using them (and somehow I don’t know how could I add them to existing static frontpage layout). I’m attaching the screenshot from about section to better clarify my question. All I actually need is to add unordered html list. I’m editing Customize -> About Section -> General -> Entry (text field).
As I said before, this field is not accepting html codes (admin page preview actually shows them, but after saving and reloading page, they are automatically removed from the text area.

I hope I clarified myself a bit better. Can you please give me some solution to make html work or guide me how to create text widget and make it work :slight_smile:

Thanks :slight_smile:

btw, adding html to the footer is not needed anymore, as I modified footer.php file and uploaded it to child theme directory

4

Hello @pa3kson,

As you long know, there’s no current method to add HTML to the entry field and there’s not much I can do about it…

Please have a look at the attached screenshot and let me know if it got you forward with the setup.

Regards

5

Oh yea, now I got it, thanks! There is a one more question I guess - how I’m supposed to resize that text to full width, since now it’s treated like a basic widget and it’s width is 33.333 % by default. I tried analyzing the page and tried the following code without further success:

#about .front-page-section .section-content text-3 .col-sm-4 col-sm-offset-0 col-xs-10 col-xs-offset-1 col-lg-4 col-lg-offset-0 widget_text{
	width: 100% !important;
}

Is there a way, how to resize this particular widget to 100 % while keeping others at default value of 33.333 %? Thanks!

6

Hello,

If you Right Click > Inspect element for that widget you will find a dedicated widget ID to use CSS for it:

#text-3 { width: 100% !important; }

Should work like a charm.

Regards

7

Hi, I didn’t think that I could access widget this way, that works great! However I wanted to make it look exacly like the demo. The problem is, that the widget itself is not being centered at all and it stays left. I tried to add margin auto and mark is as a block, but this didn’t seem to affect widget at all. Here is the code I used:

@media only screen and (min-width: 768px){
	#text-3{
		width: 80% !important;
    		display: block;
    		margin: auto;
		padding-top: -50px;
	}
}

So, is there a way how I could actually achieve centering the widget and eventually adding some padding? Thanks!

8

I’m sorry but this is just too much custom work… If you are looking for paid services please add me on skype ( Ion Rutz )

For now, this is the code to even the style in the footer, from what I can tell:

#footer .copyright {
    width: 100%;
    line-height: 1.5;
    color: #888888;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

Cheers