I just highlighted in yellow where there is a space for thumbnail images of blog posts.
I am sure there is some simple snippet css will help
Because i donot find a setting in blogger
When i looked at the html generated from the browser class="item hentry ... i donot see a thumbnail tag which has img.
Update: I tried the below css hack as well.
.hide-thumbnail .PopularPosts-thumbnail {display: block!important;}
There is no code, i followed the steps in blogger to bring the dynamic views
as mentioned here.
https://www.mayura4ever.com/2012/05/how-to-configure-your-blog-with-dynamic.html
Where i am missing
.sidebar .item.hentry .thumbnail{
display: block !important;
}
.sidebar .item.hentry.selected .thumbnail{
display: block !important;
}
This css fixes it.
Related
Newbie question.
I'm just learning how to create WordPress themes.
Every-time I start a new project, the texts of posts scroll off the screen rather than wrapping to it.
See the picture attached.
enter image description here
I haven't yet added any CSS.
I've added the HTML doc header to the Header file and closed it in the footer file.
Am I missing something here? When I watch tutorial videos everyone else's post/page content is wrapped to the screen with no side-scrolling.
Any help greatly appreciated!
Thanks,
James
You can use main <div>
<div class="container">
// Your Content
</div>
in your <body> and give the CSS of width, padding and margin as your requirement. Like below
CSS
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
I am working with an HTML template, and I'm trying to replace the site's logo based on browser size using media queries.
I am trying the technique I found here: #media queries and image swapping
My custom.css file has this code:
.test-mobile-logo{
display: none;
}
#media only screen and (max-width: 500px){
.test-main-logo{
display: none;
}
.test-mobile-logo{
display: block;
}
}
My html file has this code for the logo:
<div class="logo">
<a href="index.html" >
<img src="images/logo-dark.png" alt="" class="test-main-logo">
<img src="images/logo-main.png" alt="" class="test-mobile-logo">
</a>
</div>
The page is showing both images at once though. But when I remove my style.css file, the images finally show one at a time and replace properly.
The style.css file: http://demos.webicode.com/html/lucian/html/css/style.css
I'm not sure what the conflict is, I'm still new to CSS. Does anyone have any ideas?
You have this style in your css that overrides your display styles.
img {
display: inline-block !important;
}
Remove the !important to make your media-query work.
I agree with #HenrikhKantuni use a background image and change the background image in the css media query.
Otherwise users will always be downloading 2 images, that's one unnecessary http request and kilobytes the user will be requesting, especially over mobile networks you want to reduce this as much as possible.
as #VincentOrback mentioned just delete the !important from img selector
Better technique: use background-image instead and just change the url, or (even better) use CSS Sprites
www.angelodias.com.br/blog
My blog has a featured image inside a slider and several images through the post. To solve a problem (images on post bigger than column) I did this:
img {
max-width:450px;
height:auto;
}
The problem is: this code also changes my slideshow max-width to 450px, and that's not good. Is there a way for the CSS to work ONLY inside the post's text?
Example:
<div class="slideshow"> slideshow without custom IMG css, only template css </div>
<div class="entry-content"> post content with custom IMG css and template css</div>
You can try targeting the images use the entry-content container
.entry-content img {
// ....
}
If you use img tag, it will target all images on the page, where .entry-content img will only target the images inside of entry-content elements and that's where your images are and slide show are not.
WordPress allows to add max-width to images, simply go to Settings -> Media
or you can just select the images inside of your content, this should work:
.entry-content img {
max-width: 450px;
height: auto;
}
I have 2 pages that share the same stylesheet. How do I make changes to one, without affecting the other? I am new to coding, so please be specific as possible.
For Instance: I have a main image on the HOME page and want to delete it on the PRACTICE AREAS page but whenever I do so it deletes it on all pages.
Help please, and thank you in advance!
A good practice for styling pages differently is to have a class name applied to the body or to the enclosing div which corresponds to the page, e.g.:
<body class="home">
<div>Content here</div>
</body>
This gives you greater specificity, so in your CSS, you could be writing:
.home div {
background-image: url('your-image.jpg') no-repeat left top;
}
... or some such.
But, it sounds like the image on your home page is content, rather than its presentation. In that case you should be including it in the HTML rather than the CSS.
<body class="home">
<div><img src="your-image.jpg"> Content here</div>
</body>
Does that help?
As far as I know, you can not do conditionals with CSS. I suggest you create a second style sheet for your "Practice Areas" page and simply override the style element showing the main image. For example
/* On main style sheet */
body
{
background-image: url(../graphics/main_page.jpg);
}
/* On Practice Areas style sheet: */
body
{
background-image: none;
}
I have a problem using a clickable adverting skin as background of my Wordpress site. My site is this: http://www.tvindiretta.com. If you scroll down any page of my site you will see that the top of the background covers the content and mess all up... I think that I should add a white background in foreground. I really need your help, I'm a noob in CSS and programming.... I read about this parameters googling for...
display: block; ??
text-indent: px; ??
overflow: hidden; ??
z-index:22 ???
...but I don't know how to solve this problem... Here is my Wordpress theme CSS file http://www.tvindiretta.com/wp-content/themes/videoplus/style.css Thanks a LOT for any help in advance
P.S. This site: IMPRONTALAQUILA.ORG in certain pages shows the same ad and also other similar skins without any bug or problem... how can I get the same result? I want the background to be fixed so that users see it browsing any part of the page
Remove fixed from
background: white url(http://www.affiliago.it/accounts/default1/banners/SKIN_BAKECA.jpg) no-repeat fixed;
In your body style.
UPDATE:
Add in your css:
.myClass{
background-color:white;
width:994px;
margin:0 auto;
}
And add those styles to:
<div class="clear"> to <div class="clear myClass">
<nav> to <nav class="myClass">
<div class="wrap"> to <div class="wrap myClass">