SideKick Dan

Hi amberly66,

I don’t know what could be causing your issue. It can be a range of things from the css class names your using or a problem with css inheritance. My guess though is the css class name you’re using to change the font size. One tip is to inspect the element you want to change using the browser dev tool. Find where the font-size is declared, and use that exact same class name to redeclare the style as you want it. If the element’s font size isn’t a unique class name, then you’d have to define one that perhaps is more accurate than the one you already are trying to use. You can also try to add the !important to the style declaration ex: font-size: 500px !important;
This could be used as a way to test if you have the right class name. the !important will override any styles as well in most cases.

I had a quick look at the css. It looks almost like your site is caching versions of css causing weird issues. Perhaps you can look at where you pasted the css you used above to change the looks. Make sure you didn’t accidentally nest the css I gave you in a @media or @print or @whatever css declaration. These only use the css within them when the display conditions are met. From chrome the background was white, from ie and firefox it was black. When i inspect the css in chrome, it looks like the css block i gave you is nested within an @ block missing a closing }

From what i can see, it does look like it would be a major overhaul of the template. Being a mobile responsive template, to add another sidebar would involve some changes to the html of the template such that it might be easier to start with one that already has such capability. Some templates do have custom page layouts you can select for a post/page that include a two sidebar layout; one on each side of the the content area. Check to see if your template has that. If it does then you can choose that layout for your pages/posts. If not, one tip i uusually give to people when selecting a template. Don’t look for a template built for a niche, eg. a ‘restaurant’ template, a ‘real estate’ template. Look for a template that has the layouts you like and looks really good on mobiles; mobile menu works and looks good, things collapse as they should; built in hidden/display classes, etc. After that the colors and background images can be made to suit ANY purpose. One that I like is GeneratePress; free. It’s solid and has the page layout choice you need. You can see an example i did for a homecare office’s rewards program here – pinnaclebucks.com . As hard as it is to think of switching, it might be a better choice in the long run depending on how bad you need/want the extra sidebar. Also if you use a developer, Generatpress would be easy enough for them to mod. Some of the lower quality templates can become quite the nightmare. Speaking from experience ?? lol Hope this helps. Modding the current template so it has the extra sidebar and keeps the responsiveness on mobiles might be harder with the current template you have. Let me know if you have questions! Best regards ??

Awesome! Glad to help ??

Hey rebecca,

You can use any font you like. Either the ones built into the browsers or even a google font. Here is sample code if you want to add a google font. If using built in fonts or if your template already has a header reference to the font of your choice, then no need for the link reference. If you put a link to a font you like, you can place it into the header of your template if you want access to it again on other pages. if not, then it’s not a big deal, just toss it into your html for that widget. Won’t hurt a thing.

You can wrap your name in a paragraph tag or even just a span tag if you like and add some inline styles. You could also use a custom css class and add css styles for it too. the sample code just shows you a quick inline way. I included some common style declarations in case you want to change the font size, padding, etc. Use any others you like ??

<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet" type="text/css">

<p style="font-family: 'Dancing Script', cursive;font-size: 28px;margin-top: 10px;">Rebecca Moerkerken
</p>

Hello, I had a chance to look over your code. Here are some changes that might help ??

Css changes can be added to your child theme css overrides. Better not to change core css so that your site doesnt revert to old styles on a theme update.

TO change the sidebar width, you are better off changing the html classes for the content area and sidebar area html blocks. Your tempalte makes use of mobile responsive framework of some sort.

If the css changes don’t work or if they don’t allow the mobile responsive media queries to take over on smaller screen widths, then you may have to toy with WHERE you place the css changes below.

CSS CHANGES

/* Make container 1200px wide */
.container {
  max-width: 1200px;
}

/* Allow thirteen column content area to expand to 850px
on desktops to fill in the extra gap now that container is
wider. The built in media queries should take over and force
it to narrow up on smaller views. If they don't, then where you
place this lass css declaration may be the culprit */

.container .thirteen.columns {
  width: 850px;
}

HTML CHANGES

<!-- Change your html structure of the page. Find these divs and change the fourteen to thirteen, and the four to five. This allows your sidebar and content areas to widen. The sidebar won't be 250px exactly but it will use the built in css media queries built into whatever framework your template uses for mobile responsiveness -->

<!-- New code should look like this. just change the class numbers. There will be more divs nested into this structure, but this just represents the html blocks you're looking for. -->

<div class="container" style=" ">

	<div class="thirteen columns sr">
	</div>

	<div class="five columns sidebarright">
	</div>

</div>

<!-- Old code to locate looks like this -->
<div class="container" style=" ">

	<div class="fourteen columns sr">
	</div>

	<div class="four columns sidebarright">
	</div>

</div>

Hello, I had the chance to look over your issue. Here are some changes to the css that you can add to help make those changes ??

I don’t recommend making these changes to your core template css. If you ever update it, then your changes will be overwritten. You can place this css into a custom css file or child theme css override; Basically in a css file or location that loads AFTER the core css. CSS inheritance rules will dictate that the following rules override core css. Alternatively in a pinch you can add the !important statement at the end of a css declaration if css changes you make don’t take effect due to some issue you can’t find. But this is to be avoided where ever possible. (eg: background:#000 !important; )

/* Remove grey boxes from around widget boxes */
.widget {
background-color: transparent;
}

/* Change link color of widget area links */
.widget a {
color: #E2A3E0;
}

/* Make sidebar background black  and move it so that it fills in sidebar area instead of appearing as a long box with white margins within the sidebar area */
.site-main .widget-area {
background: #000;
color: #fff;
margin: -40px -20px 0px 0px;
}

Hello,

I was playing with your css and seems like you have a complex issue. From what i can see you’ve got some conflicting styles in your main style sheet and the one that the css inspector calls “en”. Here are some things i found that might be causeing you issues. (it could be that in an attempt to style drop down menus you didn’t sufficiently isolate the changes to just that menu or something similar)

First in your main style sheet around line 165 you have this code

#nav ul ul{
	display:none;
	position:absolute;top:86px;left:0px;
	width:170px;
	background:#edebeb;
	z-index:100000;
	border-top:3px solid #a0ce4e;
	z-index: 99999;

}

If you get rid of the display:none; and the width:170px your menu returns. this is causing it to disappear. Not the z-index. Also, there’s two declarations of z-index, one can be removed.

Second, in this ‘en’ stylesheet that’s being generated perhaps by wpml you see this code about line 1487

`#nav ul ul{
width:170px !important;
}
#nav ul ul li:hover ul{
left:170px !important;
}`

Get rid of the 170px width declaration. this should bring back the menu.

Then in your main style sheet around line 136 notice this code and add a width and position property as so

nav#nav{
	float:right;
	font:14px/16px 'MuseoSlab500Regular', arial, helvetica, sans-serif;
	z-index: 99999;
	position: relative;
	width: 100%;
        margin-top: -86px !important;
}

This should at least get you back on track to play with your menu again. Seems like there’s a lot of menu items in your main menu too. First step is to eliminate your main issues as the above code should help with. Without seeing the backend of the admin and settings, it could be some settings there cuasing the above code to get changed. Hope it helps ??

(As a side tip, for this reason, i’d say that when picking a template to start with, it is best to look for one based on stability and cleanness of code rather than on style – with css any stable theme can be morphed into what you need. especially is this the case with mobile responsive designs. Sometimes when choosing themes, persons look more for one to fit their particular business , ex ‘i need a photography template’ or ‘is there a template for pizza places’, but in reality it’s best to start with finding a template that is just coded well and works great on all browsers and devices, then just style it to fit any type of business.)

Let me know if the code help. Definitely fun for me to find one that gets my mind working. I love css puzzles ??

Danny ??

Glad it helped ??

Danny ??

Hello alexpandiyan,

glad to help if we can ?? what kinds of changes are you looking to do?

what you might do is move your question to its own separate thread or issue where you get a bit more specific about what exactly you’d like help with. This way other people needing help can maybe benefit from the solutions presented to your questions. and your specific questions will also be a separate thread.

Danny ??

Give this a shot neilbal ?? Place it in your custom css plugin or your child css styles

.site-content footer.entry-meta {
margin: 0px auto 0px;
}

.hentry {
margin: 0 auto 25px;
}

Danny ??

Hello ??

Try this bit of css in your custom css plugin or active child style.css

#page {
padding: 50px 0px 0px 0px !important;
}

the first 50px defines how much padding on top. You can change this as you will. if it works without the !important, leave this out.

Hope it helps ??

SideKick Dan

Hello Liz,

I’m not sure exactly the section your referencing, but am guessing it’s the white background creating a ‘page’ look to the site. If so try this below. If not the same code should work by modding the class to fit the area you need.

#page {
background: transparent ;
}

Hope it helps ??
SideKick Dan

Hello,

It should be ?? Depends on exactly what you’d like to do. There may be a way to do so using the theme settings. As I’m not familiar with the theme settings, if any, here’s what would work. You can add the following css to your active child theme or custom css plugin and play withthe values. I used it on the demo site with firebug.

#main .col-width {
background: #ffffff;
padding: 25px;
box-sizing: border-box;
}

#main {
background: url("https://subtlepatterns.com/patterns/black_twill.png");
}

Hope it helps ??

Danny

Try this ??

p a {
color: #ffffff !important;
}

Danny ??