I'm not a very experienced css user and so I have a question about an existing HTML + CSS template. I want to use this template to make a website: http://www.free-css.com/free-css-templates/page187/life-in-color#shout
I want to personalize this template and I have already tried hours to draw the white frame upwards, so that the header (logo and top menu) into the white frame. (see image) I can't fix it myself.
Is this possible, so yes, how?
Many thanks in advance,
T. Hægh
Move your <header> in to the .main class
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'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 am using Google Blogger. I just changed template of my blog and choose a new one. But there is a problem with this one. My logo is not fully showing.
My website: www.pkgeek.com
The K of the logo is missing. I tried to find the code for the logo, but didn't find. I think the author haven't typed specific code for the logo.
I think the blogger it self is doing some customization.
How can i fix this ?
Your div is way too small for you Logo :).
Just go in your css file and paste this code.
'#header { width: 30%; }'
I put 30% in case you need to add some things on the right of your logo, if not, just put 100% it goes well.
Good luck ;)
#header needs to be set to width: 267px instead of 220px in your css
On on my Blog (http://www.ourunitedvoice.org/) there is a great deal of empty white space that I want to change to be transparent so my background shows off more in my blog similar to this blog: http://wholefoodsmarket.com/blog/whole-story.
I don't know what HTML needs to be changed on these various page components to remove the white and make them see through. Hoping someone can help me!
add this to the body css:
body {
background-color:rgba(255,255,255,0);
}
The last "0" will make the background transparent
Sir you are using a png file
while the other site is using CSS
there is no magic learn some CSS and you will solve your problem