I want the WordPress sidebars to have a specific height, NOT equal to the content to the post/page. Just 400px, for example. I'm working with atahualpa.
Which code in which PHP do I have to hack?
If I understand you correctly, you are going to want to edit a relevant CSS file--nothing more.
Figure out which selector is appropriate for the container you want to limit and add the attributes:
height: 400px;
overflow: hidden;
Or overflow: auto; If you want scrollbars to appear.
No php, do it in your theme's css file.
Related
I'm new to this forum so hello to all.
I'm working on a WordPress website theme called tesseract. I am new to WordPress so have limited experience working with it.
The problem I'm experience is with the menu at the top of the page. If you visit www.avoinvents.co.uk and take a look you'll see that the categories don't sit on the same line. If I remove one of the categories the page looks much nicer and neater. All categories are necessary so I could not delete any.
Could anyone on here suggest how I make the necessary changes to fix the menu.
Many thanks
Here's the CSS that I changed in my browser to make the menu appear in all one line:
#masthead {
padding-top: 10px;
padding-bottom: 10px;
}
#site-banner-left {
width: 100%;
}
The main problem was that the site-banner-left CSS definition had a width of 60%, causing the text to wrap around its border, so I changed its width to 100% and added the padding to make the navigation area a little bigger. If this messes with other parts of the theme, try making the text size of the site-banner-left definition smaller instead of changing its width. Hope this helps.
You have limited the available width because an ancestor element, #site-banner-left, has a width of 60%. Increase this value or remove this rule to allow the entire menu to fit naturally.
Additionally, since the menu items are inline-block elements, you can force them to be on one line by setting the parent element's white-space to nowrap:
.nav-menu {
white-space: nowrap;
}
I'm using the Twenty Fourteen theme in my WordPress web site. On one of the pages I want to add images on the left side of the content area (menu sidebar is to the left of that) such that the text wraps around the image.
I have added two images (near the third and fourth H4 tags, if you take a look at the page) and both of the images are being forced behind the left sidebar due to the theme's -168px margin-left setting on the image's parent figure element.
On the page, if you use an Element Inspector/FireBug/whatever, you'll see the images nested in figure elements in the code and that it's way off to the left behind the sidebar. In the Rules viewer, it's showing a margin-left: -168px on classes ".full-width .site-content .wp-caption.alignleft"
I added my own class to the images to try to offset the margin by using margin-right: 168px, but it's not having an effect, presumably because the -168 left margin setting is on an element that is a parent of the image.
I don't want to select all figure elements to offset that -168px - I may want that for other figures - I don't know. WP adds an ID to each image, but I don't want to have to select each and every image ID (unless that's the only way), so how do I handle this?
Thanks for anyone's help.
Remove the .alignleft class from the figure's html.
This will remove the margin.
To get the text to flow around the figure you need to give it a property of float: left and add some right and left margin to make it look a bit nicer.
html for the figure (your image) should read:
<figure id="attachment_10" style="width: 88px; float: left; margin: 0 20px 0 10px;" class="wp-caption">
I'd say you should look at styling elements in css stylesheets as opposed to defining your styles in html.
A book for you would be:
HTML & CSS: Design and Build Web Sites
By Jon Duckett
Its what I used when I first started CSS. Its got all you'll most likely need for a while and very beginner friendly...
After some more fiddling around looking at the CSS and trying some settings I realized that I kind of answered my own question. I said that the figure element that the image is in has a setting of margin-left: -186px;. All I had to do was add my own CSS: figure { margin-left: 0px; }. Why I didn't see that sooner, I don't know...
I have a problem on my wordpress blog with the way posts are shown on the main page, and I think it's due to the size inside css/html, but I don't manage to find a solution. I'm asking for help.
The blog can be found at the URL: http://pavilionmagazine.org
As you can see on the main page, each post has the same size (due to css .post height: 600px; but when you mouse over they change size). I've managed to make the photo size the same, the excerpt to be the same number of characters, and the .post box is 600px high.
However, when you mouse over the posts they change their size and some of them (2nd, 5th, 8th posts from below) switch position. Why is that happening?
Because of each posts' size the grid has errors in it.
Why can't the posts be aligned, occupy the same size and make part of a nice fluent grid?
Thank you in advance :)
.post:hover needs to have a fixed height. Take a look at the two:
.post:hover {
height: auto;
}
.post {
height: 600px;
}
The auto height of post:hover right now is overriding your fixed height on .post.
As for position, inspect the two and see what else is being overriding by the hover values. Keep hover overrides to a minimum.
It seems that the .post boxes height is set to auto on mouseover.
So you have to edit your style.css file, line 350 and delete the css rule: height:auto;
Also, there are a lot of duplicated css rules on .post:hover. You can delete all and try this:
.post:hover {
background-color: #eaeaea;
}
Here's is the link to my client's site:
http://contentchilly.com/
I opened editor in Wordpress and found only one slider related PHP. I do not know PHP but have an idea. So I found this file named "tc_voila_slider.php" and found that it had 3 lines like :
<img width="1170" height="500" src="<?php echo TC_BASE_URL ?>inc/img/colonnes.jpg" class="slide wp-post-image" alt="<?php _e( 'Create beautiful sliders','customizr') ?>">
In all three lines, I changed the width to 500 and height to 200, but it's not showing any change. How do I modify the widths and heights of my banner on slider? It's just stretching my banner images. Also I want to move the slider up a bit. There's a lot of space empty and below the sliders, there are 3 circles that I want to show users on home page so they don't have to scroll down. How do I get rid of extra spaces?
Edit
Also, I put this code in style.css after inspecting the images in firebug; it's no use either.
.slide .wp-post-image {
width=200px;
height=200px;
}
In customizr you can add some custom css in style.css, just edit it and modify the slider with adding the lines below :
.carousel-image img {
width: 200px;
height: 200px;
}
This should works
EDIT
To change the position of the slider you have to modify the .carousel .item, reduce the height` will make it higher in your page for ex.
To reduce the space between the slider and the 3 circles you can delete the margin-top instruciton in #main-wrapper.
As you probably know, it's pretty hard to answer to this type of question whithout having the whole graphic layout. CSS can be pretty hard to configure, especially when you got many parameters as here.
Here's a way to set the Customizr slider's height to 250px. Change the value to your needs.
/* Adjust the Slider Height */
#customizr-slider.carousel .item {
height: 250px;
min-height: 250px;
line-height: 250px;
}
I would recommend to make your customizations either in the custom CSS section of the customizer option screen, or in the style.css file of a child theme (http://www.themesandco.com/snippet/creating-child-theme-customizr/).
Hope this helps
I'm rather clueless with regards to CSS, and trying to use the free Tumblr theme 'Astronaut'.
Currently I'm trying to figure out how to scale images proportionally for the 'face' of the blog (which is in a three-row style) while keeping the image intact in the main posts itself. I've tried figuring out where to place the width:300px (though that's only a guess as to what the max width of each 'row' is) and height:auto tags in their block, but it doesn't seem to be working. This is exclusive to text posts, image posts work fine.
The site, for reference.
And a pastebin of the layout.
Thanks for any help you can give me.
Try again what you mentioned in your question by adding height: auto; into your CSS:
#container .box img {
max-width: 100%;
height: auto; /* add this! */
}
This should scale the image down to the available width of the parent element if the image is larger and keeps the correct proportions of your image.