[Resolved] Opt-in form with Elements HOOK

[Katharina]

I have my Opt-In form in Elements SECTIONS but was thinking to do it in Elements HOOK to avoid doing it on every page over and over.

I got it almost like my Opt-In on my FrontPage (Elements Sections) but there is still something wrong. Could you have a look at it, please?

Opt-In form with Elements HOOK https://paste.pics/cd68f6b29294b5b0d2ec73bc9f1fb48d
Opt-In form with Elements Sections https://paste.pics/c408adcc419ce63d0e1f740a74b9e372

Thanks
Kati

[David]

Hi there,

so in the Hook Element HTML you have three opening DIVs:

<div class="angled-section1">
<div class="custom-optin-footer">
<div class="grid-container flex-grid">

Remove the first one as its not required, and remove the closing that belongs to it. Then your text two Divs change to this:

<div class="custom-optin-footer angled-section1 ">
<div class="grid-container">

[Katharina]

Thanks it worked!!!

[Katharina]

One more thing, I just added my orange Footer-Bar https://paste.pics/ad5d7277c9dabc8f088187ccfd3fdac7 on all my pages using the hook but i can not adjust the padding. It’s either 0 on top and bottom. Or to much on the bottom. There is something missing in the code but I can not figure out what it is.

I also added a search widget in my Top bar but it doesn’t look nice. Is there a way to add a CSS-Class to it?
– smaller search box (same height as the text font)
– and a light blue background color

One last thing, can the footer bar widgets be all in one line or their always on top of the others.
– I would like to have my social media icons behind my footer menu, not below.

Thanks
Kati

[David]

you need to change your padding properties in that CSS to:

padding-top: 4px;
padding-bottom: 2px;

This site is super easy to get a better understanding of the property:

https://www.w3schools.com/css/css_padding.asp

I am note sure i understand the footer requirement – so the the title / logos / title / social icons are all in one row?

Have you an example of the search field that you like?

[Katharina]

Hi David

Orange Bar before footer
it’s still not working I used the padding’s your provided but it still looks like this
https://paste.pics/001e1ac8c2c7a5582c5874190ea4e51f

Thanks for the site recommendation, I use it already and tried all different kinds of paddings with px, em, but nothing makes an even padding on top and bottom.

Footer Bar
This is what it looks like if I add my social media Icons https://paste.pics/c6313f367c35f946922984365ea320dc
But I would like the Icons to be behind my Footer menu like on my other website https://paste.pics/5334669301bf54259d034672272506b2

Search field
That’s what it looks like at the moment https://paste.pics/3a76cdfb79c8ed950682ee12ed46f864
The search field is a lot bigger than the text in front of it, would be nice to have it in the same height as the text. I was thinking if it is possible to reduce the padding.
And if it is possible to change the background of the search field from white to something else.

Sorry for having so many questions

Thanks
Kati

[David]

So:

1. Orange footer bar – the padding CSS is working, but as the content is wrapped inside a H5 tag it picks up that bottom margin, which you can remove like so:

.custom-footer-bar h5 {
    margin-bottom: 0;
}

Then if you adjust your padding CSS, you will see this applied correctly.

2. Footer bar – very tricky, as that social icons widget uses some bizarre CSS, but try this:

@media (min-width: 990px) {

    .inside-site-info,
    .footer-bar {
        display: flex;
        flex: 1;
        align-items: center;
    }

    .inside-site-info {
        flex-wrap: wrap;
    }

    .copyright-bar {
        margin-bottom: 30px;
        order: -1;
    }

    .footer-bar aside:nth-child(2) {
        margin-left: 40px;
        margin-right: 250px;
    }

    .footer-bar aside:first-child {
        margin-left: auto;
    }
}

@media (max-width: 989px) {
    .sfsi_widget {
        display: flex;
        justify-content: center;
    }

    .norm_row {
        text-align: center !important;
    }
}

3. Search field is getting the font size from the INPUT element, we can reduce that for just the Top-Bar widget like so:

.top-bar .search-field {
    font-size: 14px;
}

[Katharina]

Hi David it was all working but half an hour after adding this codes into my code-snippets plugin my WordPress crashed.

My website is running again but every time I activate code-snippets it crashes again. Do you have experience with it? What would be maybe a better option to insert all the CSS codes?

Thanks
kati

[David]

For less than 400 lines of CSS i would either use the Customizer > Additional CSS ( built in ) or Tom’s Simple CSS Plugin.

Anything larger and i would look at using a Child Theme

[Katharina]

If I use a child theme, do I add the css into the additional css?

Do you have a recommendation to keep it clean and finding the code easily? I was worried that it becomes messy if i have a code after code.

[David]

The child theme has its own styles.css that you can use. Additional CSS will still work with a child theme, as would the Simple CSS plugin.

So heres a workflow i would recommend.

a. Install the Simple CSS plugin.
One of its benefits is you get a Code Mirror in Dashboard > Appearance > Simple CSS which is easy to edit and arrange your CSS nicely and add comments.

b. Use the Customizer > Simple CSS for live testing of your CSS.
Add new CSS to the top of the CSS stack, as errors within your CSS can stop code below it from working. You can use the CSS validator to test your code if needed:
http://www.css-validator.org

c. Once happy with the CSS go to the Code Mirror from the dashboard. And re-organise and comment your CSS for easy referencing. You can use the Broswer Finder to quickly search for a term or comment.

Laying out your CSS:

Use comments to split your CSS into blocks. /* I am a CSS Comment */
Logically order them. I would start with Global CSS values e.g:

/* ==== Global styles, i am group heading  === */

/* -- Typography --*/

/* -- Buttons -- */

/* -- Colors -- */

then work through theme elements place them in logical order top of screen downwards

/* ==== Theme Elements - another group heading === */

/* Site Header */

/* Navigation */

/* Sidebars */

/* Footer */

After this you can add sections for very specific Custom CSS like your opt-in.

Generally anything that is inside a Media Query i would add at the bottom of the CSS. Or at least at the bottom of its particular section. As CSS Cascades downwards a rule at the top of the list can be overwritten by a rule below it. So if you style something for desktop and want a different set of rules for mobile, then the mobile media query should come after the desktop CSS.

When you’re all good and happy with it your CSS you can if you wish remove it from the Simple CSS and add it to your Child Theme style sheet.

[Katharina]

Thanks David for your help, I haven’t understood it completely 🙂 but I will look in to it more deeply. At least I have something to relay on and a guideline that I can use.

I will figure it out Step by Step, your advice gives me a good idea where I have to do my research on and what I have to learn.

[David]

You’re welcome. Let us know if you get stuck 🙂

[Katharina]

I transfered all codes to Simple CSS with using a child theme. And all codes are working except one interference between my styling for Icons and the Footer Opt-in.

As soon I but this code in for my Icons. My Opt-in looks good but my Icons are not styled.

.fa-icon { 
	font-size: 60px; 
	color: #75dddd;
}

But as soon I take this code off, my Footer Opt-In has no styling at all. There shouldn’t be a connection but for some reason there is. And my Icons have no styling either way.

Otherwise I think I figured it out.

Could you look at my Simple CSS input if the organisation is like you would do it? Only if it isn’t to much work 🙂

Thanks
kati

[David]

So just before the /* Icon Style*/ you will see the two button selectors – they have no properties so are broken, you can just delete them and all should be well:

ie. these:

.button.content:hover,
.button.content:active

/* Icons Style*/
.fa-icon {
    font-size: 60px;
    color: #75dddd;
}

[Author]

Posts