Search Results for 'sidebar'

[Angelo]

Angelo

#25340

Well, how can i make this column model you showed me in the Demo?
I’m not so able to understand, where do I have to look for description?

I exclude sidebar neither in my idea nor my user type.

Thanks a lot!
Angelo

[Ben Ritner]

Ben Ritner

#25329

With a menu that large you should really consider changing to a more user freidnly format.

1. Use a full width menu with columns like here: http://themes.kadencethemes.com/pinnacle-premium/
(see features)

2. Use a much smaller navigation and have your complete list on a page or sidebar where it’s more natural to select.

Ben

[Ben Ritner]

Ben Ritner

#25283

If you want a select box in a page or sidebar you would have to use html. For a sidebar you would use a text widget and add the htlm and javascript like this:

<select class="kad-custom-select">
<option value="">Empty</option>
<option value="http://google.com">Google</option>
</select>

<script type="text/javascript">
jQuery(document).ready(function ($) {
$("select.kad-custom-select").change(function(){ if ($(this).val()!='') { window.location.href=$(this).val(); } });
});
</script>

Ben

[Hannah]

Hannah

#25240

Hey,
Step 4 in this tutorial should get you there- https://www.kadencewp.com/building-displaying-menus/
So you would just be adding “Links” as menu items. If you don’t see the Links option in the left sidebar you may need to select it from Screen Options in the top right.
Hope that helps!
Hannah

[Ben Ritner]

Ben Ritner

#25200

Has to do with the fact that your not using a sidebar but a column in pagebuidler.

Here is the css you need:

.panel ul.menu {
    list-style: none;
}
.panel ul.menu li {
    border-bottom: 1px solid #eee;
}
.panel.widget_nav_menu li a {
    margin-bottom:0;
}

Ben

[Ben Ritner]

Ben Ritner

#25105

1. You can but it means it will break the ability to close it.. the css is:

section.shipping-calculator-form {
display: block !important;
height: auto !important;
}

2. The theme doesn’t edit any of the woocommerce checkout so your fine using a plugin.

3. well first make your header color blue so it matches your topbar. Theme options > advanced styling.
The add this css:

div#thelogo img {
margin-top: -50px;
}

4. Yes, the theme options will transfer over automatically. Only thing you will have to do is re-assign your menus.

5. Just a matter of removing the natural spacing from your elements… here is code you can add:

.footerclass .kad-icon-box {
margin-top: 0;
margin-bottom: 0;
}

6. Because of how it’s coded it can go above the buttons with this css:

.sidebar a.paypal-express-checkout-button {
    display: block;
    width: 100%;
    clear: both;
    float: none;
    text-align: left;
}
.sidebar a.paypal-express-checkout-button img {
    float: none !important;
    text-align: left;
}

7. You can make the sidebar be on the left with css. The theme doesn’t have a option for two sidebars. You can fake it though if you use pagebuilder: https://www.kadencewp.com/using-page-builder-virtue-premium/

The css to move the sidebar to the left is:

@media (min-width: 992px) {
body .main.col-lg-9 {float:right;}
}

Ben

[Miguel]

Miguel

#25082

Hello, I am having an issue with my Site Layout Style. “Main Settings” I have the site set to box’d I believe, where it will allow me to add a background. I Saved.

Next I went to “Home Layout”, and I have it set to “Display a Sidebar on the Homepage”. I Saved.

I Refreshed my website, and the Sidebar IS there. No problem.

HOWEVER, when I close all my windows, and open my website up again, the Sidebar is NOT there. I tried from Multiple computers, and NO SIDEBAR. All the settings are still the same, under “Main Settings” and “Home Layout”.

Why is it not appearing? Any help to resolve this would be great.

My website is *Login to see link . It should have the Sidebar on the homepage. Please advise.

Thank You.

[Miguel]

Miguel

#25082

Hello, I am having an issue with my Site Layout Style. “Main Settings” I have the site set to box’d I believe, where it will allow me to add a background. I Saved.

Next I went to “Home Layout”, and I have it set to “Display a Sidebar on the Homepage”. I Saved.

I Refreshed my website, and the Sidebar IS there. No problem.

HOWEVER, when I close all my windows, and open my website up again, the Sidebar is NOT there. I tried from Multiple computers, and NO SIDEBAR. All the settings are still the same, under “Main Settings” and “Home Layout”.

Why is it not appearing? Any help to resolve this would be great.

My website is *Login to see link . It should have the Sidebar on the homepage. Please advise.

Thank You.

[Miguel]

Miguel

#25074

my website is http://www.AfrobaileRecords.com. It should have the Sidebar on the homepage. Please advise.

[Miguel]

Miguel

#25065

Hello, I am having an issue with my Site Layout Style. “Main Settings” I have the site set to box’d I believe, where it will allow me to add a background. I Saved.

Next I went to “Home Layout”, and I have it set to “Display a Sidebar on the Homepage”. I Saved.

I Refreshed my website, and the Sidebar IS there. No problem.

HOWEVER, when I close all my windows, and open my website up again, the Sidebar is NOT there. I tried from Multiple computers, and NO SIDEBAR. All the settings are still the same, under “Main Settings” and “Home Layout”.

Why is it not appearing? Any help to resolve this would be great.

Thank You.

[Miguel]

Miguel

#25065

Hello, I am having an issue with my Site Layout Style. “Main Settings” I have the site set to box’d I believe, where it will allow me to add a background. I Saved.

Next I went to “Home Layout”, and I have it set to “Display a Sidebar on the Homepage”. I Saved.

I Refreshed my website, and the Sidebar IS there. No problem.

HOWEVER, when I close all my windows, and open my website up again, the Sidebar is NOT there. I tried from Multiple computers, and NO SIDEBAR. All the settings are still the same, under “Main Settings” and “Home Layout”.

Why is it not appearing? Any help to resolve this would be great.

Thank You.

[Greg]

Greg

#24972

Alrighty… so, what I ended up doing was this:

1. Convert the Spoiledmilk.com sticky sidebar to a WordPress plugin (http://spoiledmilk.com/blog/sticky-sidebar/). The plugin enqueues a modified Spoiledmilk script plus the “custom” script (the one that simply invokes the Spoiledmilk stuff on an appropriate selector)

2. Add a new variable to the Spoiledmilk JS:

var sidebarWidth = sidebarSelector.outerWidth();

3. Add a new conditional so that it doesn’t make mobile “sidebars” sticky. The conditional is the one below the “//calculate” line, and the final is this:

if ((contentHeight > sidebarHeight) && (viewportHeight > sidebarHeight) && !($('#mobile-nav-trigger').is(':visible'))) {

4. In the “else if” section, add a width property to the sidebar element:

//original, keep this still
sidebarSelector.addClass('sticky').css('top', config.sidebarTopMargin);
//added the following
sidebarSelector.width(sidebarWidth);

5. Add some style to the head. I did this right within the Spoiledmilk’s self-executing function. You could do this in a style sheet instead, but then the problem is that the plugin isn’t portable anymore:

$("<style type='text/css'>.sticky { float: none; position: fixed; top: 20px; z-index: 6; left: auto; }</style>").appendTo("head");

6. In the custom JS, call it like this:

var $sidebar = jQuery('aside.kad-sidebar .sidebar');
if($sidebar.length > 0) {
  $sidebar.stickySidebar({
	sidebarTopMargin: 30
  });
}

—-

Here’s a zip of the plugin for anyone that might find it useful: http://gregpettit.ca/assets/sticky-sidebar.zip

Note: I haven’t done any intelligent checking for resizing after load. If you go down to mobile size from full size, the sidebar will adjust accordingly… but if you go back up to full size, you will have a wide sidebar. There might be other similar quirks. But it does the trick for my needs for now.

[David]

David

#24970

I’ve also tried removing all of the custom css related to the video player and the problem persists. If I remove the position: relative from the ktsidebar css using Firebug, that helps in the fact that the video player is laid on top and made useable, but still combined with the sidebar content. Am sure it’s am relatively simple css tweak but am still stuck at the moment.

[David]

David

#24953

Hello, the top widget on the sidebar spills over to the main content on page here *Login to see link in mobile view

I have some custom CSS for the YouTube player which may be interfering:

.tubepress_normal_embedded_wrapper, .tubepress_thumbnail_area {
width:auto!important;
}

.tubepress_container {
width: 100% !important;
height: 75% !important;
}

.tubepress_normal_embedded_wrapper{
position: relative !important;
padding-bottom: 56.25% !important;
width:100% !important;
padding-top: 30px !important;
height: 0 !important;
overflow: hidden !important;
clear:both !important;
margin-bottom:20px !important;
}

.youtube-player {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}

Any suggestions?

Thanks,
David.

[David]

David

#24953

Hello, the top widget on the sidebar spills over to the main content on page here *Login to see link in mobile view

I have some custom CSS for the YouTube player which may be interfering:

.tubepress_normal_embedded_wrapper, .tubepress_thumbnail_area {
width:auto!important;
}

.tubepress_container {
width: 100% !important;
height: 75% !important;
}

.tubepress_normal_embedded_wrapper{
position: relative !important;
padding-bottom: 56.25% !important;
width:100% !important;
padding-top: 30px !important;
height: 0 !important;
overflow: hidden !important;
clear:both !important;
margin-bottom:20px !important;
}

.youtube-player {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}

Any suggestions?

Thanks,
David.

[Ben Ritner]

Ben Ritner

#24901

You can see an example of that here on the sidebar: http://themes.kadencethemes.com/virtue-premium-3/shop/

[Ben Ritner]

Ben Ritner

#24872

You can use this css:

.sidebar a:hover {
color: #f76a0c;
}

Ben

[Michael]

Michael

#24844

Hmmm.. wired.. i Postet a Link but its gone now..

Link: http://www.schoenberg-kosmetik.ch/team/geschaeftsleitung/

Thank you for the Contact widget tip Hanna.

Now it’s just the first point to solve and im pretty happy.
-> 1. How can i set the Hover color and the actual chosen link to orange in the Sidebarmenu (similar to Mainmenu and Topbar)

[Andrew]

Andrew

#24842

hi Ben

Sorry, I didn’t see this reply before. I must have forgotten to check the email-me box.

Yes, it makes sense and thanks for the explanation. However, it sounds as if css in a child theme comes before custom css, so anything that is currently in my custom css within the Virtue admin section should work ok.

My css is as follows (sorry it’s rather long):

/* TOPBAR */

.kad-topbar-right {
        width: 35%;
}

.kad-topbar-left {
        width: 65%;
        float: left;
}

.topclass {
        border-bottom:1px solid #aaa;
}

#menu-topbar-menu li a {
        font-size:14px;
        color: black;
}

#menu-topbar-menu li a:hover {
        color: #ffffff;
        background-color:#1e73be;
}

.topbarmenu ul li a {
        font-size: 14px;
        color: black;
}

.topbarmenu ul li a:hover {
        color: #ffffff;
        background-color: #1e73be;
}

/* TOPBAR SEARCH */

#searchform {
        background-color: #1e73be;
}

#topbar-search input[type=text] {
        color: #ffffff;
        font-size: 14px;
}

/* HEADER */

#logo {
        padding-top: 8px;
        padding-bottom: 12px;
}

.kad-header-widget {       /* Free Delivery text */
        font-family: Open Sans;
        font-size: 14px;
        font-style: italic;
        text-align: right;
        padding-top: 30px;
        padding-right: 50px;
}

/*SECONDARY MENU */

#nav-second {
        border-bottom: 1px solid #aaa;
}

ul.sf-dropdown-menu {
        width: 100% !important;
}

/* active secondary menu submenu item */
#nav-second ul.sf-menu li.current-menu-item > a { 
        color: #000;
        background-color: #CED8F6;
        border-bottom: none;
}

/* non-active submenu items: */
#nav-second ul.sf-menu ul li a {
        font-size: 12pt;
        border-top: none;
}

/* HOME */

h3.hometitle {
        font-size: 50px;
        color: #777;
        font-weight: 600;
        line-height: 100px;
}

.graphflow_recommendations.related products h2 {
        align: center;
        font-size: 50px;
        color: #777;
        font-weight: 600;
        line-height: 100px
}

/* LARGE FONT PAGE STYLE */

p.large {
        font-size: 22px;
        line-height: 40px;
        color: #555;
}

table.large {
        font-size: 20px;
        line-height: 26px;
        color: #555;
        width: 100%;
        margin-top: 10px;
}

tr.large {
        vertical-align: top;
}

tr.description {
        font-size: 16px;
        line-height: 18px;
        font-style: italic;
}

h4.large {
        font-size: 40px;
        line-height: 50px;
        font-style: normal;
        color: #000;
}

/* NO TRANSITION - COLLECTION OF ELEMENTS */

.home-message,
.sf-menu a,
#nav-second ul.sf-menu li,
.kad-btn,
.button,
#commentform .form-submit #submit,
.post-password-form input[type=submit],
.topbarmenu ul li a,
.product_item a.product_item_link .kad-product-noflipper img,
.widget_layered_nav ul li a,
div.product-category.grid_item a h5 {

        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
}

/*  P R O D U C T S   G R I D  */

/* PRODUCT ARCHIVE IMAGES HOVER OPACITY */
.product_item:hover a.product_item_link .kad-product-noflipper img {
        opacity: .2;
}

/* "ON SALE" FLASHES */

.single-product.woocommerce span.onsale {
        font-size: 20px;
        background: #ff0000;
        background: rgba(255,0,0,.7);
        width: 70%;
        position: relative;
        left: 15%;
        right: 15%;
}

woocommerce span.onsale, span.onsale, .woocommerce #carouselcontainer span.onsale {
        font-size: 16px;
        background: #ff0000;
        background: rgba(255,0,0,.7);
        width: 100%;
}

/* ALIGN GRID PROPERLY */

.kad-woo-image-size {
        min-height: 100px;
        display: table-cell;
        width: 100%;
        vertical-align:middle;
        height: 100%;
}

.product_item  a.product_item_link {
        text-align:center;
        display: table;
        min-height: 80px;
        vertical-align:middle;
        width: 100%;
}

.product_item.product_details a.product_item_link {
        display: block;
        min-height: 0;
}

.products.product_item.product_details h5 {
        min-height: 0px;
}

.yotpo.bottomLine.yotpo-small {
        min-height: 12px;
}

.yotpo-bottomline.pull-left.star-clickable {
        min-height: 12px;
}

/* QUICK-VIEW: BUTTON - PRODUCTS ARCHIVE*/

a.quick-view-button { 
        font-size: 12px;
        text-transform: uppercase;
        line-height: 14px;
       /* border: 1px solid #aaa; */
       /* border-radius: 5px; */
        background-color: #ffccff;
        width: 100%;
        padding: 3px;
}

a.quick-view-button:hover { 
        background-color: #ff00ff;
        color: #ffffff;
}

a.quick-view-button.button {
        height: 28px;
}

.product_item a.product_item_link h5 {
        font-size: 20px;
        line-height: 22px;
}

/* QUICK-VIEW: PRODUCT MODAL */

div.woocommerce.quick-view.product,
div.wocommerce.quick-view-content,
div.wocommerce.quick-view-content form.variations_form .cart {
        height: 100%;
        width: 100%;
}

div.pp_pic_holder.pp_woocommerce.pp_woocommerce_quick_view div.pp_content_container div.quick-view-content form table.variations td.product_value #pa_pack-size {
        color: black;
}

/* fix theme conflict - "Choose an Option" is not visible */
div.product .quick-view-content form.cart .variations td.product_value select {
        opacity: 1;
}

/* PRODUCT PAGE */

/* Label above product attribute select box */

div.product form.cart .variations td.product_value {}
div.product form.cart .variations td.product_label {}

/*  Font sizes for attribute select box */

.woocommerce-page #content div.product form.cart .variations label  {
        font-size: 20px;
        text-transform: uppercase;       
        color: black;
}

.product_value .select2-container.kad-select .select2-choice>.select2-chosen {
        font-size: 16px;
        text-transform: capitalize;       
        color: black;
}

.product_meta {
        display: none;
}

/* Fix theme conflict with restocking alerts (out of stock message appears when no options are selected, ie when page first loads) */

#bolder_alerts_outer {              
        display: none;
}

input.bolder_alerts_submit {
        background-color: #33cc33;
        padding: 5px 15px;
        border: 1px solid #aaaaaa;
     /*   border-radius: 3px;  */
}

input.bolder_alerts_submit:hover {
       background-color: #99e699
}

/*  A D D   T O   C A R T  B U T T O N (INCL QUICK-VIEW MODAL POPUP) */

.product .entry-summary button.kad_add_to_cart, div.pp_pic_holder.pp_woocommerce.pp_woocommerce_quick_view div.pp_content_container div.quick-view-content form div.variations_button button {
        font-size: 20px;
        font-family: sans-serif;
        color: #1e73be;
        font-weight: normal;
        background-color: #f5cf5d;
        text-transform: capitalize;
        border: 1px solid black;
        border-radius: 5px;
        width: 200px;
        height: 50px;
        position: relative;
        left: 100px;
        transition: none;
}

.product .entry-summary .kad_add_to_cart:hover, div.pp_pic_holder.pp_woocommerce.pp_woocommerce_quick_view div.pp_content_container div.quick-view-content form div.variations_button button:hover {
        background-color: #f09707;
     /*background-color: #1e73be;*/
        color: #ffffff;
        transition: none;
}

/* PRODUCT TABS */

/*
div.product .woocommerce-tabs ul.tabs li.additional_information_tab {
        display: none;
}
*/

div.product .woocommerce-tabs ul.tabs li:hover {
        background-color:#ced8f6;
}
/* SHOP SIDEBAR - AJAX NAVIGATION */

.widget_layered_nav h3 {
        font-size:12px;
        line-height: 12px;
        text-transform: uppercase;
}

.widget_layered_nav ul li a {
        padding: 2px 2px 2px 2px;
        font-size:12px;
        line-height: 12px;
}

.widget_layered_nav ul li a:hover {
        background-color: #ced8f6 !important;
}

.widget_layered_nav ul li small.count {
        padding: 2px 2px 2px 2px;
        font-size:12px;
        line-height: 12px;
        color: black;
}

.yith-woo-ajax-navigation .yith-wcan-list li small.count {
       display: block;
       position: absolute;
       left: 80%;
       float: none;
       font-size: 10px;
}

.sidebar .widget {
        margin-top: 10px;
}

.kad-sidebar {
     /*border: none;*/
        border-left: 1px solid #aaa;
        padding: 25px;
     /*background-color:#ced8f6;*/
}

/*  PRODUCT SIDEBAR */

.widget_shopping_cart_content {
        border: 1px solid #aaaaaa;
        border-radius: 10px;
        padding: 10px;
}

.widget_shopping_cart_content ul li a {
        line-height: 16px;
}

.widget_shopping_cart_content p.buttons {
        float: right;
}

.button.checkout.wc-forward {
        font-size: 16px;
        border: 1px solid #aaaaaa;
        border-radius: 5px;
        padding: 4px;
}

.button.wc-forward {
        font-size: 16px;
        border: 1px solid #aaaaaa;
        border-radius: 5px;
        padding: 4px;
}

.widget-inner ul.product_list_widget {
        border: 1px solid #aaaaaa;
        border-radius: 5px;
        padding: 4px;
}

.widget-inner ul.product_list_widget li, li a, li ins {
        line-height: 16px;
}

/*  CHECKOUT PAGE */

#pay_with_amazon {
        height: 150px;
}

/* BOOKING FORM */

.rtb-booking-form fieldset {
        float: left;
        width: 50%;
}

.rtb-booking-form form .add-message {
	display: none;
}
.rtb-booking-form form .message {
	position: relative;
	top: auto;
	left: auto;
}

.rtb-booking-form label {
        font-family: Open Sans;
}

#booking-button {
        float: right;
        margin-right: 200px;
        font-size: 24px;
        padding: 15px;
        line-height: 50px;
        border-radius: 15px;
        background-color: #07de39;
        color: #ffffff;
}

#booking-button:hover {
        background-color: #97fa93;
        color: #000000;
}

/* FORUM */

a.bbp-forum-title {
        color: #555555;
        font-size: 28px;
        line-height: 32px;
}

a.bbp-forum-title:hover {
        color: #ffffff;
        background-color: #1e73be;
        font-size: 28px;
        line-height: 32px;
}

p.bbp-forum-description {
        display: none;
}

.bbp-forum-content p {
        font-size: 16px;
        color: #555555;
        font-style: italic;
}

/* TESTIMONIALS */

.testimonialbox {
        min-height: 180px;
        border-width: 1px;
        border-color:#8c8c8c;
        font-style: normal;
}

.testimonialbottom p {
        min-height: 42px;
}

/* FOOTER */

#containerfooter {
        font-size: 14px;
}

#containerfooter h3 {
        font-size: 20px;
}

#containerfooter .menu li a {
        padding: 2px 12px;
        max-width: 200px;
        background: #ced8f6;
}

[elis]

elis

#24832

Hi, i’m Loving your Theme! Great job ; )

I’d like to setup a HOME page with a sidebar spanning only the blog grid or spanning some of the content and not all the page.

this is my site: http://www.dirtyrun.it

1) How can I add the blog grid in a Page Builder page?

2) I’m trying to add a countdown in the Home page none of them is working with page builder. Any suggestions? (I know this is a bit out of scope..)

Thanks

[elis]

elis

#24832

Hi, i’m Loving your Theme! Great job ; )

I’d like to setup a HOME page with a sidebar spanning only the blog grid or spanning some of the content and not all the page.

this is my site: http://www.dirtyrun.it

1) How can I add the blog grid in a Page Builder page?

2) I’m trying to add a countdown in the Home page none of them is working with page builder. Any suggestions? (I know this is a bit out of scope..)

Thanks

[Hannah]

Hannah

#24824

Hey,
1. Can you post a link?
2. You can use the Virtue: Contact/VCard widget but it gives you limited options. You can also use this- https://wordpress.org/plugins/contact-form-7/
Once downloaded and activated would then just add the widget to your sidebar in appearance > widgets.

Hannah

[Michael]

Michael

#24821

Hey Ben,
If you have a look at the Link i posted, you’ll see, that I’ve made a Menu into the Sidebar who contains similar Sites of one Topic.
I really like the handling and already had positive feedback, but i have two issues with it.
Link to the Page:

1. How can i set the Hover color and the actual chosen link to orange (similar to Mainmenu and Topbar)
2. How can i use the contact form with a Sidebar? I searched for a Short-code, but was not able to find one. //The same Question i have with the Portfolio, even when i haven’t set up the Sidebarmenu till now.

Thank you!

[Michael]

Michael

#24821

Hey Ben,
If you have a look at the Link i posted, you’ll see, that I’ve made a Menu into the Sidebar who contains similar Sites of one Topic.
I really like the handling and already had positive feedback, but i have two issues with it.
Link to the Page:

1. How can i set the Hover color and the actual chosen link to orange (similar to Mainmenu and Topbar)
2. How can i use the contact form with a Sidebar? I searched for a Short-code, but was not able to find one. //The same Question i have with the Portfolio, even when i haven’t set up the Sidebarmenu till now.

Thank you!

[susan]

susan

#24504

I have added a Virtue Gallery Widget to the sidebar on one of my pages but the images seem to be fuzzy – I have tried resizing them (smaller) but it doesn’t seem to make any difference. How might I get the images to be sharper please?
Susan
Here is a link to the page
*Login to see link

[susan]

susan

#24504

I have added a Virtue Gallery Widget to the sidebar on one of my pages but the images seem to be fuzzy – I have tried resizing them (smaller) but it doesn’t seem to make any difference. How might I get the images to be sharper please?
Susan
Here is a link to the page
*Login to see link