-
Posts
-
Hi Team,
I hope you’re well.
I have installed a new widget area on our webpage by updating my PHP theme file, but I’m just wondering what I need to put in my CSS styling to style the element. I don’t have the new widget active as yet, but I have tried it with an image and it works okay. I would like the container area to stretch to only the maximum width of the normal container width please and for the images to be centred when they are put in the widget area. The background colour is right being white as the images have a white background, so I am almost there.
This is the code below I installed to my PHP file.
add_action(‘ava_before_footer’,’avia_above_footer’);
function avia_above_footer(){
dynamic_sidebar( ‘footerb’ );
}
If you need it, this is the link to our website Peak Potential Adventures
Warmest regards,
DarrenHey Darren,
Could you please attach a mockup of what you’re trying to achieve?
Best regards,
VictoriaHi Victoria,
I was following this thread on your forum if this helps in the meantime.
I just need to centre the new widget content and reduce the container width. I used this code below, but am I meant to replace the #test-5 in the code below with my new widget element name?
.avia-section + #text-5 {
max-width: 1310px;
margin: 0 auto;
}
Enfold Forum Topic
I’ll also do a mock up, but thought this may also assist.
Cheers,
DarrenHi,
Thank you for the update.
Where did you add the widget? Based on the snippet that you provided above, the widget should be located above the footer but it’s not there. Did you remove it? Please add the widget back so that we can get its id and modify the css code accordingly.
Best regards,
IsmaelHi Ismael,
Yes, I had to take the widget contents down as the site is live and I don’t have a staging one.
The widget works okay after updating my PHP theme file and the new widget which I named footerb is above the blue footer and I can add elements from the widget menu. In this case in the photos below on the page I created to show you, I added two widget image elements which I would like to do you replace the accreditations logos that are on the blue footer into this new footer section.
I only want the images though not go the full length like the blue footer, only the length of the standard body container. Also, I would like the images to be side by side and to be centred in the container.
Below is the link to the page I have set up with the screenshot of the images I put in and had to take down. I guess I could even use the gallery widget and put the logos in the gallery widget side by side?
I had to use 3 photos that show the design vertical as the whole webpage would not fit on my laptop screen, so I hope it gives you an idea of how things are showing up.
footer live example
Cheers
DarrenHi Ismael,
I managed to find a carousel that seems to work well, but I would like to limit the width of the widget area to just the standard container width, not full width. it will look okay on a smaller screen, but the desktop will be too spread out. My new widget area is called footerb
This is the link to the home page of our website.
Peak Potential Adventures website
Cheers,
DarrenHi,
Thank you for the update.
You can use the following css code to limit the width of the widget and align it to the center.
@media only screen and (min-width: 768px) { #custom_html-2 .custom-html-widget > div { max-width: 1310px; margin: 0 auto; } #custom_html-2 .slick-initialized .slick-slide { display: block; width: 18% !important; } #custom_html-2 .slick-track { width: 100% !important; } }Best regards,
Ismael
- You must be logged in to reply to this topic.