I've been struggling with this post grid which I really like and want to use. But I dislike the gray part that appears besides te picture. Even the play button on a video post gets moved to the gray part instead of staying on the picture.
I am working with the newspaper theme using big grid 7, I have been trying to change the way the box works withing chrome's inspect but I can't figure it out.
Here is the website www.breakline.nl; the post grid is just above the footer (for now). You can clearly see what I mean when you zoom in or out while looking at the grid.
The above is right, but also you may add the below to complete remove the grey color from behind.
.td-big-grid-post .td-module-thumb{background:none!important;}
Generally go to the Appearance > Editor find the style.css file and at the bottom line around 33036 make a markup something like /*my own CSS*/ and add the below lines.
img.entry-thumb.td-animation-stack-type0-2 {
width:100%;}
.td-big-grid-post .td-module-thumb{background:none!important;}
Press Update file, and you are ready.
Credits go to #Relisora
add to your css file
img.entry-thumb.td-animation-stack-type0-2 {
width: 100%;
}
Related
I just want to add a basic banner at the top of my tumblr website. The code (posted below) is just below the <body> part of the html, however I can't figure out why any img link that I put into the 'imgurlhere' section only shows up as a broken icon (see picture).
<a href=“myurlhere”><center><img src=“imgurlhere” width=“500”></center></a>
broken image icon that's showing up
My idea is to upload a short gif to tumblr, and then copy the code into the html so that it is placed at the top of my website as an advertisement. However, every url I put into the 'imgurlhere' section shows up as broken - regardless of advice I've found online stating that's all one needs to do.
I'm making sure to include the correct link, such as .png etc
And making sure to copy it straight from the 'copy image address'.
Any idea?
Thanks!
I think that setting width="500" in img tag was causing this issue.
-The best way would be to add a class and then set the width of the image.
.image{
width:500px;
}
</center>
Try using your image there and let me know if it works or not.Thank You
please help me! i have spend 2 days to understand this condition :(
i found a website: http://www.wpbeginner.com, which have amazing widget icons in the sidebar lead to different pages.
then i tried to make something similar to it. i get their widget code.
<div class="guideicons">
Starting a<br>Blog
WordPress<br>Performance
WordPress<br>Security
WordPress<br>SEO
WordPress<br>Errors
Building an<br>Online Store
</div>
now i want to understand 2 things
firstly as you can see he added this tag at the beginning then
" class="guideicon starting". guideicon +icon name = icon and it's name which appears in the web page what he did to make it occur?
secondly the arrangement 2 columns each one have 3 icons how he did it it html5 through this simple code?
thank you so much
He has the width set to 47% in the class .sidebar a.guideicon. Because the width is set as 47% the width of the container, you cannot fit more than 2 icons across, so it overflows into the next row.
Open the developer tools and play around with the width. If you set the width to something like 10%, it will all fit in the same row.
Well if you inspect this sidebar you can see which class does what. In your case he uses the class guideicon to implement same style accros all the a tags in this sidebar with the rule .sidebar a.guideicon. And after that he uses the second class e.g speed to ad an icon whith the :before pseudo selector to add an icon from their icon pool with this 2 rules: content: "\f00b"; & font-family: Wpbeginner;. This is how Font Awesome was working(I am not sure if it still works like this nowadays).
If you want add you own icons like this you should just need to do something like this:
https://codepen.io/anon/pen/ZRJPEv
I hope i helped
I am having trouble changing the styles of a widget on my Wordpress site.
The one I am targeting is the bottommost one on the homepage: http://rfm-inc.com. It is the section of the page that reads "Proud member of the Mitsubishi Materials family of companies"."
The styles seem to be mainly applied to the ID ".content", but I'd like to alter those styles ONLY at the ".text-3" level.
I can change the content stylings and get the effect I want in the widget, but it changes all of the other widgets.
I want the bottom widget to fully span the page (ie, full blue background, centered text, resizing and wrapping text at smaller screen widths), but to leave the other sections alone.
Any tips on how to target this widget independent of the other sections?
Usually wordpress widgets have a their own style css file in wp-content/plugin and the name of the plugin.
Anyway if you open the developer tools on the web browser and you click on the element you want to change, you will figure out which selector to use.
Make some test on the developer tool and then make the changes on your files.
In this EXACT CASE you can do it with:
.widget:last-child {
/* your rules */
}
As this is the last child of the section id="main".
Or use its ID:
#text-3 {
/* your rules */
}
Okay. I solved it. Let's see if I can explain.
First, I changed the #content container to:
body.home #content.col-full {
max-width: 100% !important;
}
This of course expanded the full container.
Then I was able to style individual widgets as needed.
It was the more parent element that needed styling, then everything else flowed from there. But it was hard for me to target, since I:
Didn't know how to target only the home page (body.home)
Didn't see that the container was #content
Didn't realize that the easiest thing to do was to adjust the container and to style the contained widgets separately
Two days ago I spontaneously bought myself a domain. The day before that, I hardly even knew what a domain really was. Since then, I've been trying to teach myself HTML for the very first time. Basically what I'm trying to say is, I'm very new - and will probably be poor in my explanations.
I just succeeded in making an 'image-button', sorta. It's where I make a button-like image and then use it as navigation on my website (just like a regular link). My issue is that the link 'border' itself is bigger than the image, so you can press an inch outside the image itself and it will work. How do I make the invisible link 'border' the same size as the button?
This is my site:
http://www.djeveln.com
On the test page (djeveln.com/test) is where I test things. There's the button I'm talking about, in case you can't understand my explanation very well.
Here's my HTML:
<a class="ButtonLink" href="http://www.djeveln.com" title="Home">
<img src="/images/button.png" class="TestButton"></a>
Here is the CSS I use for the image position and size:
img.TestButton { /* Dette linker til selve størrelsen av knappen (bildet)*/
position: absolute;
width: 100px;
height: 75px;
top: 400px;
right: 250px;
}
Hope you can help me! :P
Your button image contains a large transparent area (with the actual button more or less in the center), and that's what is causing the "borders".
Although there are CSS workarounds for that, I'd recommend you just open the image in Photoshop (or any other image editor), and crop the transparent area away. Make your image the exact size of your button.
One more tip, that can make your life way easier as your learn: use a debugging tool like the Chrome Developer Tools, or Firebug (if you're on Firefox). With those, you can inspect any element on your HTML (right click it and choose "inspect"), check the CSS applied for them (and also modify it on-the-fly for testing), and much more. That's how I spotted the transparent border on your image.
At a quick glance, it looks like you've simply made the image too large. There's a lot of transparent image outside the button that is part of the click target. How are you making the button?
If you made it in Photoshop, for instance, you should crop the image to be tight to the border of the button.
You could do that in CSS, but you'd be making work for yourself -- I'd modify the source image.
Topic explains it all. I've got it set as...
body{
background-image:url('images/bg.gif');
background-repeat:repeat-x repeat-y;
}
Can't seem to figure out why it's not rendering in the background. I'm new to wordpress themeing in general. Could anyone help me out? I've posted a link to the content in full below.
http://www.aidanchurch.com/blog/
In the style sheet, I see some garbage characters right in front of the
body{ background-image:url('images/bg.gif');
line in the css file. Those might be making the rendering skip the rule. I'd backspace and clean that up.
It looks like you background image is located here:
http://www.aidanchurch.com/blog/wp-content/themes/bloo_06/images/bg.gif
So first of all try an absolute address like so:
background-image: url('/blog/wp-content/themes/bloo_06/images/bg.gif');
However if that works, you really want a relative URL, so take a look at the directory structure of your theme and ensure the background image is indeed relative to the css file you have written that rule in, in the way you have written.
Check that you have uploaded the correct image to the correct place. When I tried to view the image I could see a very small and transparant image. http://www.aidanchurch.com/blog/wp-content/themes/bloo_06/images/bg.gif .