I have a wordpress plugin called "List Category Posts" in use, but I have some issues with the customization of that list.
Post-titles containing a specific amount of characters are now flowing around my thumbnails, but they do not start on the same height as the thumbnails. I want my thumbnails in the top left position, just like that:
[img] text text
Location of that list
Code snippet in my style.css:
.post-content ul.lcp_catlist li { background-image: none; padding-left: 0;clear:both;}
.lcp_thumbnail{ float:left; margin:0px 10px 5px 0px; height: 100px; width:100px;}
.lcp_catlist li:after {content:'.';height:20px;visibility:hidden;display:block;clear:both; }
.lcp_title{font-size: 20px;}
Help is much appreciated.
If you have access to the template, you should place the img tag before the title.
This way everything will work exactly as you want it to.
If you can't access the template you could float the title to the right.
.lcp_title { float: right; width: 472px; }
This ought to solve the problem as well.
Let me know how it works out.
If you would like the image always on the left you need to move the <a> tag to the first thing listed within the li. The CSS is fine.
Related
I have a dilemma that appreciates and tries any suggestion put forward. I have a localhost running wordpress using the theme The Fox. I have everything running perfectly except for the footer.
I have some pages that the content does not extend a page, while others extend more than a page and the issue I have is that the footer starts exactly where the text ends and I dont want to add white space because of view port dissimilarities. As you can see below, I have a screenshot of a sample page with small content.
I hope you noticed the extra white space after the footer, which is also on the screen taking the footer to the center of the page.
I want the footer to extend to the end of the page no matter the length of the content or the size of the screen.
Inside the CSS, there is a footer section and it is here on Pastebin but I think the most important one is as below;
footer
{
bottom:0px;
right:0;
left:0;
overflow:auto;
padding:0px;
min-height:70px!important;
height:auto;
position: relative;
z-index: 9000;}
In the footer, I am using just a single column and I think this code handles that... also in pastebin.
.footer_1_col .widget_wrap
{
width:100%!important;
float:none!important;
margin-left:auto!important;
margin-right:auto!important;
padding-right:10px!important;
}
And on the footer type, I use type 8, which uses the code;
/**************************************************
Footer Type 8
**************************************************/
.footer_type_8 .widget_wrap {
margin: 10px 0px 0px 0;
}
.footer_type_8 .widget {
margin:0px 0px 0px 0;
}
.footer_type_8 .widget h2 {
font-size:10px;
text-transform:uppercase;
font-weight:900;
letter-spacing:normal;
line-height:14px;
margin-bottom:0px;
padding-left:0px;
position: fixed;
}
.footer_type_8 .widget_line {
display:none;
}
Please what am I doing wrong and where do I need to make changes? If you need to see some other code, please let me know and I will post it on pastebin.
Thanks.
Special thanks to #Firasd for his comments that made this possible.
All I did was to look for the body element using the browser inspector, and then recalculate the size for that element using the already known static height of the header and footer.
This Was Added to the Page's CSS Section
html,body {height:100%;}#fw_c { min-height: calc(100vh - 162px);}
The theme uses Bakerly Visual Composer and I just had to add the above code to the page I want the changes.
Note that if you have a slider, you will need to put that in your calculation too except if your slider is in a row element.
This should be simple, but I can't figure it out:
Here is the site:
I want the logo at the top to be brought down by 20px. I'm using chrome and trying to mod the CSS in the developer tool to figure out what is keeping it stuck to the top, but haven't figured it out yet. I thought the obvious answer would be to increase the padding-top, but nothing moves when I add that in.
Played around with your code. Padding-top works, but on the div that contains your image - class="head-wrap". Just add padding-top:20px; to that element. It worked in developer console for me. Better than adding a margin to the <header> element as you won't reveal the body color.
full css you should be able to use
.head-wrap{
padding-top: 20px;
}
in the site-header add margin-top:20px; The css would be:
.site-header {
background: url(http://www.therunexperience.com/blog/wp-content/uploads/2014/02/TRESimpleWhite_small4.png) no-repeat !important;
margin-top: 20px;
}
EDIT:
Or for padding add:
.head-wrap
{
padding-top: 20px;
}
here is the site with the issue
I want the opaque bar which is its own div to appear behind the div with the text. Both of those obviously in front of the image.
My issues are:
1) I can't get the div titled "fp-banner" to shrink to a height of 70px while containing the text inside.
2) The white border keeps extending all the way to the bottom and I have no idea why.
I'm trying to post all of the code here but when I copy and paste it the html actually appears so I guess I won't post it.
Thank you.
Let me address issue #2 first - the white border extends below the featured post image because you have the border applied to the container element (#featured-post) instead of the image itself (#featured-post img)
So change the CSS for #featured-post to:
#featured-post {
float: left;
width: 370px;
margin-left: 10px;
padding:0;
}
and the CSS for #featured-post img to:
#featured-post img {
border: solid 3px #fff;
z-index: -1;
margin:0;
padding: 0;
}
For issue #1, add this to #fp-banner:
height:70px !important ;
and add this to your CSS:
#fp-banner p { line-height:14px ; margin-bottom:8px }
You may need to adjust the margin-bottom value for the #fp-banner p styling to fit in the 70px height.
NOTE: Don't forget to make a backup of your style.css before you make these changes, just in case :)
Hope this helps!
Best,
Cynthia
I have a website in which I want to change the space between some elements. I don't know much about CSS. I am a newbie to it. You can see the website here.This is now on a temporary domain name : timepasssite.hostoi.com.
I want to reduce the space between logo and main menu1...Home..Add a Listing..I have to move it up by a small distance.
I also want to move the search box up in the line of the Main Menu1.
I want to move up the Featured Listing up near the earth's photo 4 px distance should be enough. Listing Categories move Up close to Featured Listings 2 px distance..
Can anybody guide me how to do this ?
Here are the Common.css and Style.css files..
Download Common.css Style.css
Image :
I can't paste the files here...I don't know how to...Please download the files for me and provide me the solution!
Generally speaking, you have to use margin, padding or in case of absolute positionning, left, top etc...
In order to reduce the space between your logo and your main menu, you have to reduce (or delete) the padding-bottom in div#logo css property, located on common.css, as this :
div#logo {
padding: 15px 0 0 0;
text-align: center;
}
For your search bar, the css is contained inside the parent div, inline style. You'll have to override the top property in your css file, and giving it -50 as a value for instance.
Now you have the general idea, I think you can manage your other issues.
I strongly suggest you to use Firebug (extension for Firefox / Chrome) though.
Feel free to ask for precisions.
I seen your css. In that padding: 7px 10px 10px; making space between menu and logo, and also you were mention height also.
reduce the padding and also margin-top property.
better post your codes
make this change in common.css to remove bottom spacing of the logo -
div#logo {
padding: 15px 0 0 0;
text-align: center;
}
2, 3
I think
You can use margin-top or bottom property
or padding
In common.css, find this:
div#logo
{
/*width: 185px;
height: 75px;
float: left;*/
text-align: center;
padding:15px 0px;
}
When two values are supplied for the padding attribute, they specify the top/bottom and left/right values. Therefore at the moment there is 15px of padding being applied to both the top and bottom of the logo. (See http://www.w3schools.com/cssref/pr_padding.asp.)
Change the padding:15px 0px; line to padding: 15px 0px 0px 0px; - this will set all padding to 0 apart from the top, which stays at 15px.
You should be able to find a similar solution for your other queries: look for the container id in the HTML, then find the CSS for the id. For example, if the Featured Listing is in <div id="featured">, look in the CSS for div#featured, and edit the padding property there.
On this page, you'll see a blog post that has a thumbnail, tag set and other information in a sidepanel on the left: http://www.elegantthemes.com/preview/TheStyle/2010/10/morbi-rutrum-interdum-justo/.
What I am trying to do is to create a black rectangle on this white div, a black rectangle that extends from the top left of the white div to the bottom, just left of the post text.
At first I tried simply creating a two-color image that was one pixel wide and using repeat-y in order to extend the "faux two column" layout from top to bottom. However, this div resizes dynamically, so in many cases the black text from the post ends up running over into this sidebar.
I then tried using the same image in the same way, but giving the white div a "position: absolute" trait. This caused the sidebars on the right to spill over onto the post content.
I want to create this black rectangle to take up any whitespace to the left of the post content.
I have inherited a lot of CSS that I'm not sure how to change. Any advice would be greatly appreciated. `
I will add the style.CSS file here if I can find some way to do so. This is my first time on the site.
Looking into the CSS, it says that everything you said is within its own div:
<div class="info-panel">
With that said, you just make your CSS changes to that class. You'd do something like:
.info-panel {
background-color: #000;
}
But keep in mind that, for it to look good, you should play with the padding and margins for the info-panel and post-content classes as well.
I just made it look better and keep the same overall width by including the following:
.post-content {
background: url("images/entry-bottom-bg.png") repeat-x scroll left bottom transparent;
padding: 0 4% 30px 1%;
}
.info-panel {
background: none repeat scroll 0 0 #000000;
float: left;
margin-right: 1%;
padding: 2% 0 2% 2%;
width: 29%;
}
The last two code snippets from the CSS are just some advice on what I would do if my solution worked for you. Doesn't mean you have to, so please don't treat it as such. It just keeps the area from looking awful.
It's hard to decipher what exactly you're trying to do, but see if this helps:
.post-content.info-panel {
background-color: black;
padding: 4px;
width: 28%;
}