Columns

Hello,

1. There isn’t really a way to do that in the free theme with the column shortcode. A better option would be to use a page builder plugin and configure your columns with the plugin. That would give you the most control over the layout.

2. The fonts of your sidebar items will be dependent on the markup of the text within it. Most fonts take settings from Theme Options> Typography Settings. Can you please post a link so I can see your current sidebar setup?

-Kevin

Hi Kevin!

1. Actually, I found a class the theme is already using ?? : col-md-25
That is 20%. Is there by chance one for 60% so that I can do 20%, 60%, 20% in one row? Otherwise I guess I will need to set up my own classes.

2. Sorry, the sidebar colors for links is #555, not #333, but this is regardless of what colors are set in the theme settings. YOu can choose whatever for body, h-tags etc, and the sidebar links are always #555 . See my screenshot.

1. I’m not really sure what you mean. That seems like an overly complicated way to accomplish something that can simply be done in a page builder. Can you explain what you mean by “set up my own class?”

I still think a page builder makes this way simpler.

2. That image doesn’t really tell me anything. Can you please post a link to your site instead so I can see your sidebar visually vs your page content?

-Kevin

1. I don’t want to use a Page Builder, they add a lot of bloat. By setting up my own classe I just mean I guess I have to use something like

<div class="row">
<div class="my-column"></div>
</div>

and then styling it to have the width I want.

2. My site is on localhost, but what I mean is that the theme css is always adding the sidebar link color to be #555 (see /kad-framework/ascend/general.less line 15).

1. Sorry, I still don’t quite understand how that’s going to work with the column shortcode. I’m probably totally spacing something obvious.

Are you going to be copying the output of the columns from the View Source of the page, then add the class within that html to set the column width in CSS?

If so, that should work fine, just don’t target the actual col-md-4. Let me know if you need any help with the CSS after you get the html setup.

2. I think I see what you mean. Try overriding the link colors in your sidebar by adding this CSS to Theme Options> Custom CSS:

.sidebar a:not(.button) {
    color: blue;
}

.sidebar a:not(.button):hover {
    color: red;
}

Change the colors to whatever you like and let me know if that works for you.

-Kevin

Hi Kevin,

1. no, the shortcode I guess won’t work since it only accepts the regular Bootstrap columns 1-12. So I guess I will have to write my own classes. I never use the vidual editor, just the plain text editor and I would use divs for the columns. I have not found a 60% column div though, so I guess I would need to write that myself.

2. Yeah, I know how to change the color, but it’s a suggestion for a future update that the sidebar link color would just default to the body color or something and not be set to #555 by default.

<div class="row">
<div class="col-md-25"></div>
<div class="col-md-60"></div>
<div class="col-md-25"></div>
</div>

You could use that html. then add this css

@media (min-width: 992px) {
.col-md-60 {
float:left;
width: 60%;
}
}

There isn’t a built in option for 20% 60% 20%.

You could do 16.67 – 66.67 – 16.67

Ben

2. It’s one you can go back and forth on. Some widgets it really makes sense to have a highlighted link and some it really doesn’t.

Thanks!