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
Related
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
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%;
}
I have been working on my site for my store and have multiple pages with products arranged in a table. First column is a photo of the item followed by columns with item #, description, price, etc.. Currently I am writing code for each image resize "img height:, img width:" Is there code that would automatically do this for each image? I am trying to keep the width the same on all photos to keep the column the same but the height is usually different for each photo. I am just trying to keep them proportional. Just trying to figure out a way of doing this easier. I've tried many design-your-site websites but none offer subpages of subpages. Wesbite is www.fredstrainshop.com. "lionel.html" link gives a good example of what I'm trying to do. Thanks for the help.
You can create a class for each image and specify the width and height. In case you want to change height of some specific elements use id.
HTML-
<body>
<img class="train" src="http://www.fredstrainshop.com/6-39534.jpg">
<img class="train" src="http://www.fredstrainshop.com/6-39563.jpg">
</body>
CSS-
.train
{
border: 1px solid black;
width: 100px;
}
See this for inspiration - https://jsfiddle.net/0w0vkzst/
On another note, I just visited your website, please consider using classes and ids for arriving at a more modular design. You might want to brush your html skills, for that codecademy and w3schools are great sites.
I used this html line
style="width:100%;height:100%;"
The line won't work in my case because the scrollpane works a little bit differently.
But if I add this line:
<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg" style="width:100%;height:100%;"/>
it works
I need your help.
The Title in the green Box "News" appears right under this Link.
http://www.mjart.ch/category/news/
But because of this weird Template I'm using, there are sometimes some imperfections. On this Site here
http://www.mjart.ch/portfolio/
the Green title seems to disappear behind the padding border. I really don't know why.
What I found out is that there are 2 different CSS styles. The first one that works is a .blog-title and the second one is a .single-title. But both are same styled. I would be happy about some help.
Hi if you dont want to change the structure of the template you can add this css rules
.page-id-21 .single-page{
margin:0;
}
.page-id-21 .single-page .single-content{
margin-left: 25px;
}
I added a .page-id-21 class, otherwise in the contact page you will add a margin.
This can be a solution, another is to search the correct template page, if it's a premium plugin it will have it, and you dont need to add the css rules.
So, I downloaded a free website template. I modified the layout a little and now I'm having problems getting the top location icons to become smaller and position themselves all in one straight line. I've tried changing the "image image-full" tag in the CSS file from 100% to a smaller percentage. That makes the icon smaller but then the icons won't position themselves to be all on one line. The site is found at http://harmlesscrack.com/br/. I've torn apart this CSS file changing everything I can find that links to the location icons and just about given up on all hope of understanding how they formatted this CSS.
P.S. Please don't flag this for "not being a useful question.' I really do need help here.
Just explicitly set the widths of the <div class="4u">, or alter the .\34 u class. For example, the following will place the 4 containers in-a-row spanning only one line:
// HTML markup
<div class="4u">
...
</div>
// CSS
.\34 u {
width: 24.333333%;
}