Search Results for 'footer'

[John]

John

#249106

Hannah,

Thank you so much for this detailed response. Some things fixed immediately, others not yet.

1. How do I make the menu items in the footer boxes come together? This is not the footernav. because it is not the footer menu. Rather it is the Appearance>menu where I’ve placed Navigation widgets and pointed towards menus. I’m having trouble gaining control over the css via the #containerfooter css that you recommended. Here is what I have now. Some features like the hover color and border don’t work.

#containerfooter h3 {
font-size: 20px;
line-height: 22px;
color: #003a6d;
font-family: sans-serif;
}

#containerfooter .menu {
margin-left: 0;
border-left: 1px solid #003a6d;
}
#containerfooter .menu li a {
color: #003a6d;
font-size: 12px;
line-height: 12px;
margin-bottom: 12px;
text-decoration: none;
background: transparent;
}

#containerfooter .menu li a:hover {
color: #003a6d;
border-color: #003a6d;
text-decoration: none;
background: transparent;
transition: .3s;
}

2. Please explain in one more sentence how to use SiteOrigin page builder to get into designing my footer space. You wrote: “Yes, you can do that using the Layout Builder widget from Siteorigin.”
So far, I’ve tried the two methods that I know of, and neither has worked: Appearance>widget and insert a menu widget. This results in the titles of the menu pages that are inserted into the widget. The other method is building a separate menu, labeling it “footer”, then from Appearance>Menu directing wordpress to place that named “Footer” menu in the footer area.
Both of these strategies have proved difficult to work with in terms of the css, and adding content that can be easily formatted. What if I want to write a full sentence, how do I do it?

Thank you!!

[Hannah]

Hannah

#249103

Hey John,
There’s definitely a huge learning curve with all this. You’ll get there!
1. This will specify the background for your footer menu:

.footernav ul li a:hover {
    background: #fff;
}

2. This css will align your subcategor menu items:

#containerfooter ul {
    padding-left: 0;
}

3. You can adjust your footer widget titles with this css:

#containerfooter h3 {
    font-size: 20px;
    line-height: 22px;
    color: blue;
    font-family: sans-serif;
}

4. I’m actually seeing it aligned right. Are you wanting it centered?

5. This will center align you footer and move the credits below

.footercredits {
    margin: auto;
    display: table;
}
.footernav {
    float: none;
    width: 100%;
}
.footercredits p {
    float: right;
}

6. Yes, you can do that using the Layout Builder widget from Siteorigin.

Hannah

[John]

John

#249096

What would be ideal is to get into the footer space as if it were a Page. I would add four columns, put a SiteOrigin page builder widget in each, and write and format and link whatever text I want, the way that I want it. Is this possible?

[John]

John

#249094

Hi Hannah!

I’ve spent many hours today trying to read about css online, and experimenting with the css for the footer. It’s been a frustrating chore to say the least. I have a lot of respect for you programmers who have the patience to deal with this. I would never get through this if it weren’t for pandemic times. Plus kids running around…

Some specific questions:

1. I have the same css specifications for the following:
#containerfooter .menu li a:hover
.footernav ul li a:hover

But they are not behaving similarly. In the #container, I am getting a weird blue background color when the cursor hovers over any text, for example, even though I have specified a white background.

2. In the footer, I would like the menu items to be vertically single spaced. I have line-height specified as 12px (the same as the font size), but this only gives line height within <p> tags, not for intra-paragraph spacing. For example, in footer box #3, which is the primary menu, the spacing between each menu item is very large. Also, the subservient pages are indented. How do I control css for these items?

3. The titles for the footer boxes carry over from the Appearances>Menus. They are large, white, a different font, and don’t fit at all. See http://www.develop.georgianchant.org

4. I don’t know why the Footer navigation at the very very bottom is now visible to the left, not in the center.

5. Does footercredits have a container? I tried to put some css into .footercredits {} but it didn’t work. I tried to do this in order to move it away from the .footernav. Right now the credits are preventing the footernav from centering under the page properly. I would like to move the credits somewhere else. Maybe at the very bottom, maybe all the way to the right.

#containerfooter .menu {
margin-left: 0;
border-left: 1px solid #003a6d;
}
#containerfooter .menu li a {
color: #003a6d;
font-size: 12px;
line-height: 12px;
margin-bottom: 12px;
text-decoration: none;
background: transparent;
}

#containerfooter .menu li a:hover {
color: #003a6d;
border-color: #003a6d;
text-decoration: none;
background: #f4f4f4
transition: .3s;
}

.footernav {
float: center;
border-top: 1px solid #003a6d;
}

.footernav ul li a {
color: #003a6d;
font-size: 12px;
line-height: 12px;
border: 1px solid transparent;
margin: 10px;
display: inline-block;
}

.footernav ul li a:hover {
color: #003a6d;
border-color: #003a6d;
text-decoration: none;
background: #f4f4f4
transition: .3s;
}

.footercredits p {
font-size: 12px;
color: #003a6d
}

[HikingGeek]

HikingGeek

#249076

On the bottom of my portfolio pages, it says “previous project” and “next project” where can I edit this to say “review” instead of “project.” I see it here, but unable to figure our which php file needs to be edited.

<footer class="single-footer">
<div class="post-footer-section"><div class="kad-post-navigation portfolio-nav clearfix "><div class="alignleft kad-previous-link"><a href="*Login to see link class="kt_postlink_meta kt_color_gray">Previous Project</span><span class="kt_postlink_title">screwpop tool</span></a></div><div class="kad-grid-link"><a href="*Login to see link class="kt_color_gray"><i class="kt-icon-th-large"></i></a></div><div class="alignright kad-next-link"><a href="*Login to see link class="kt_postlink_meta kt_color_gray">Next Project</span><span class="kt_postlink_title">Open Country</span></a></div></div> <!-- end navigation --></div> </footer>
</article>

• This topic was modified 5 years, 12 months ago by HikingGeek.

[HikingGeek]

HikingGeek

#249076

On the bottom of my portfolio pages, it says “previous project” and “next project” where can I edit this to say “review” instead of “project.” I see it here, but unable to figure our which php file needs to be edited.

<footer class="single-footer">
<div class="post-footer-section"><div class="kad-post-navigation portfolio-nav clearfix "><div class="alignleft kad-previous-link"><a href="*Login to see link class="kt_postlink_meta kt_color_gray">Previous Project</span><span class="kt_postlink_title">screwpop tool</span></a></div><div class="kad-grid-link"><a href="*Login to see link class="kt_color_gray"><i class="kt-icon-th-large"></i></a></div><div class="alignright kad-next-link"><a href="*Login to see link class="kt_postlink_meta kt_color_gray">Next Project</span><span class="kt_postlink_title">Open Country</span></a></div></div> <!-- end navigation --></div> </footer>
</article>

• This topic was modified 5 years, 12 months ago by HikingGeek.

[Ben Andersen]

Ben Andersen

#249044

Hi Ben,

A couple of weeks could work. But which plugin do you recommend if I have to go that route? Would Quadmenu or Max megamenu be compatible?

I’m looking for font settings for site content (paragraph text) and also for the footer widgets. Sorry if I’m being blind! 🙂

Thanks,

Ben

[Hannah]

Hannah

#248973

This css will allow you to adjsut some of the styling:

#containerfooter .menu {
    margin-left: 0;
}
#containerfooter .menu li a {
    background: transparent;
    color: #fff;
}
#containerfooter .menu li a:hover {
    color: #333;
    background: transparent;
}

If you’re wanting a menu like the example, you can use the footer navigation (Apperance > Menus). Then add css like the following to adjust the styling:

.footernav ul li a:hover {
    color: #fff;
    border-color: #fff;
    text-decoration: none;
    background: transparent;
    transition: .3s;
}
.footernav ul li a {
    color: #003a6d;
    font-size: 12px;
    border: 1px solid #003a6d;
    margin: 10px;
}

Let me know if any of that will work for you!

Hannah

[Ben Andersen]

Ben Andersen

#248955

Steps to reproduce:
1. Use 5 footer widgets with titles

Note that the 5th title aligns center on the whole area as if it would span columns 5+6. This looks bad. Maybe you could set left align on those titles out-of-the-box for a better experience?
h2.widget-title { text-align: left; }

[Ben Andersen]

Ben Andersen

#248955

Steps to reproduce:
1. Use 5 footer widgets with titles

Note that the 5th title aligns center on the whole area as if it would span columns 5+6. This looks bad. Maybe you could set left align on those titles out-of-the-box for a better experience?
h2.widget-title { text-align: left; }

[John]

John

#248948

My footer looks like this right now: http://www.develop.georgianchant.org/

[John]

John

#248942

Hi Hannah,

Thanks for this response. Everything seems to be fine now… the masonry option in Virtue Galleries is working fine, so I have that option activated for the gallery on the front page of http://www.develop.georgianchant.org

7. The footer is the only outstanding nuisance. I want to create a sophisticated footer area like the examples shown on this page: https://www.webdesignerdepot.com/2018/09/4-best-practices-for-designing-mega-footers/
I took your suggestion to create different menus, then to use navigation widgets placed in the four footer columns to link to those menus. The result is less than stellar. The problem is that I don’t seem to have any direct way to control the css for content in the footer. So the color, padding, font size, highlight and hover text colors, background colors, borders… must this all be added with additional css specific to each of the four footer columns?

[Ben Ritner]

Ben Ritner

#248888

That wouldn’t be from the theme. Have you added any javascript into the header or footer? What plugins are you using?

Ben

[Ben Ritner]

Ben Ritner

#248886

Hey,
Add this javascript into your theme options > header and footer scripts (you can enable in the theme extensions) place in the footer scripts:

jQuery(document).ready(function ($) {
$('body').localScroll({offset: 0});
});

Ben

[John]

John

#248869

Hannah,

This was a most useful response, thank you very much!

1. Solved

2. Solved

3. If you look in the footer of this website http://www.develop.georgianchant.org there are all of the categories. Eventually when I load more posts (lots of posts) about specific Orthodox chants, I would like readers to be able to find information about those chants by clicking on categories like “Chant style” “Service Type” “Monastery School” etc. By clicking on a category in the footer, I hope that readers will be taken to a page where they can see every post that has been tagged with that category. Like the results of a Search query. Is this how categories work?

4. Solved

5. Thanks for tipping me to the location. I enabled the Virtue galleries here. But they still don’t still seem to be working right. The pictures are all out of proportion and getting skewed. Also, how do I control the way the mosaic looks? Right now, it doesn’t look good.

6. I put in this CSS. But now it is making my primary menu disappear when it goes to tablet size. Another solution?

7. This css solved the color. But the organization of the text in the footer is still a giant mess. I wonder how I can gain more control over putting this menu text into nice neat horizontal rows, tabbing lower heading text under major heading texts? Something like this: https://www.webdesignerdepot.com/2018/09/4-best-practices-for-designing-mega-footers/

Thanks again for all of your help!
John

[Hannah]

Hannah

#248866

Hi Laurent,
Thanks for clarifying!

1. I’ll have Ben look into this. For now, you can remove the first logo on sticky with this css:

.is-sticky div#logo {
    display: none;
}

2. You can add this to your custom css:

.footercol1, .footercol2, .footercol3, #containerfooter h3, #containerfooter .virtue_social_widget {
    text-align: left;
} 

3. This css will adjust your woocommerce styling:

#content div.product form.cart .button {
    background: #999;
    color: #fff;
    border: 0;
}
.wrap .button, table.cart td.actions .coupon .input-text, table.shop_table, table.shop_table td {
    border: 0;
}

Hope that’s helpful!

Hannah

[Hannah]

Hannah

#248861

Hey John,

1. You can add this to your custom css box in Theme Options:

#nav-second ul.sf-menu>li>a {
    padding: 35px 0;
}

2. I’m already seeing your header and secondary menu sticky. Sorry, could you clarify what you mean?

3. Do you mean post categories? Could you link to an example?

4. You can add this to your css:

.footernav {
    float: right;
    border-top: 1px solid #eee;
}

5. In Theme Options > Misc Settings do you have “Enable Virtue Galleries to override WordPress” turned on? Is it only the mosaic styling that is not working?

6. This is meant to break down for tablets. If you want to force desktop view for tablets you can use this css:

@media (min-width: 468px) {
#nav-second ul.sf-menu {
    display: block;
}
#nav-main ul.sf-menu, .nav-main ul.sf-menu {
    display: block;
}
.nav-trigger .nav-trigger-case {
    display: none;
}
}

7. This css should do it for you:

.footernav ul li a {
    color: #003a6d;
    font-size: 12px;
}

Hope that’s helpful!

Hannah

[John]

John

#248842

Hi Ben and Team,
Love the theme! However, struggling to get the Call To Action Banner formatted on my home page. Here is the link: *Login to see link Just above the footer. Can’t figure it out! Your guidance is greatly appreciated!

Thanks,

John Craig
Performance Plus Tennis

[John]

John

#248842

Hi Ben and Team,
Love the theme! However, struggling to get the Call To Action Banner formatted on my home page. Here is the link: *Login to see link Just above the footer. Can’t figure it out! Your guidance is greatly appreciated!

Thanks,

John Craig
Performance Plus Tennis

[John]

John

#248834

Hello Hannah,

I have a new front page, and a number of things are not cooperating. I wonder if you could help? Here is the page: *Login to see link

1. I have an image as a background to the Secondary menu. I would like to play with the height of this image. I tried to increase the height of the text line, but then this messed up the drop-down menu text spacing. So I need to work directly with that background image.

2. Could you help me make the Header and the Secondary Menu sticky? There is not an option within the theme to have a sticky header, and a secondary menu. I would like both to be disappear as a user scrolls down the page

3. This site employs a lot of “categories”. I don’t understand, can categories generate new pages? I hope so, as I would like a Category page to then list every item on the website that has been categorized with that rubric.

4. I would like a horizontal line to separate the footer widget areas from the footer menu.

5. The Virtue image gallery mosaic style doesn’t seem to be working, and I can’t figure out why.

6. At about 800 px wide, my home page menus disappear. How can I control when the menus collapse to the format for mobile phones? This should not happen until the width is more like 350px or 400px, no?

7. I want to control css for footer text, but can’t find where to do this. I want to have long lists in small font of all the categories, down in the footer area. I tried to put these categories in a unique footer menu. I found some supplementary css for the footer, but it doesn’t seem to work. Here is what I put in as supplementary css in the “advanced settings.”

.footercredits p {
font-size: 12px;
}

.footercredits p a {
color: #003a6d
}

.footermenu li a {
font-size: 12px;
font-weight: normal;
color: #003a6d
}

• This topic was modified 5 years, 12 months ago by John.

[John]

John

#248834

Hello Hannah,

I have a new front page, and a number of things are not cooperating. I wonder if you could help? Here is the page: *Login to see link

1. I have an image as a background to the Secondary menu. I would like to play with the height of this image. I tried to increase the height of the text line, but then this messed up the drop-down menu text spacing. So I need to work directly with that background image.

2. Could you help me make the Header and the Secondary Menu sticky? There is not an option within the theme to have a sticky header, and a secondary menu. I would like both to be disappear as a user scrolls down the page

3. This site employs a lot of “categories”. I don’t understand, can categories generate new pages? I hope so, as I would like a Category page to then list every item on the website that has been categorized with that rubric.

4. I would like a horizontal line to separate the footer widget areas from the footer menu.

5. The Virtue image gallery mosaic style doesn’t seem to be working, and I can’t figure out why.

6. At about 800 px wide, my home page menus disappear. How can I control when the menus collapse to the format for mobile phones? This should not happen until the width is more like 350px or 400px, no?

7. I want to control css for footer text, but can’t find where to do this. I want to have long lists in small font of all the categories, down in the footer area. I tried to put these categories in a unique footer menu. I found some supplementary css for the footer, but it doesn’t seem to work. Here is what I put in as supplementary css in the “advanced settings.”

.footercredits p {
font-size: 12px;
}

.footercredits p a {
color: #003a6d
}

.footermenu li a {
font-size: 12px;
font-weight: normal;
color: #003a6d
}

• This topic was modified 5 years, 12 months ago by John.

[Robin]

Robin

#248833

Thanks Ben! It is a non-Kadence theme but adding a plugin for inserting header and footer scripts solved my problem 🙂

[Ben Ritner]

Ben Ritner

#248821

<script type="text/javascript">jQuery(document).ready(function ($) { 
if ($('.kt-gal-outer').length ) {
$('.kt-galleries-container').isotopeb({ filter: '.new-work' });
var $optionSets = $('.kt-filters .kt-option-set');
var $this =  $optionSets.find('a[data-filter=".new-work"]');
if ( $this.hasClass('selected') ) {return false;}
var $optionSet = $this.parents('.option-set'); $optionSet.find('.selected').removeClass('selected'); $this.addClass('selected');
}
});</script>

That javascript should do it, add in the footer scripts and then let me know.

Ben

[Laurent]

Laurent

#248780

Hi,

I replaced my virtue premium theme with the bold child theme. Everything is going pretty well except:

– I have 2 logos which appear in the “Basic with shrink for sticky”,
– the text of the footer widget is centered while I would like to align it to the left.
– the design of the woocommerce store is less design. How to change this?

thank you,
Have a good day and stay safe!

Laurent

[Laurent]

Laurent

#248780

Hi,

I replaced my virtue premium theme with the bold child theme. Everything is going pretty well except:

– I have 2 logos which appear in the “Basic with shrink for sticky”,
– the text of the footer widget is centered while I would like to align it to the left.
– the design of the woocommerce store is less design. How to change this?

thank you,
Have a good day and stay safe!

Laurent