So I only want to change a small part of my website. I thought it would be easy, but somehow it doesn't change and I don't know why. I'm using bootstrap so that might make it a little bit difficult. I want to change my sidebar from just one solid color to an image. And it just doesn't show, when I delete the color it just shows nothing. I'm trying to use the 'background-image' property.
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/flat2.css" rel="stylesheet">
</head>
<body>
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="border-right" id="sidebar-wrapper" >
<div class="sidebar-heading"> <img src="text\flat.png" class="title" alt="FLAT"> </div>
<div class="list-group list-group-flush zijkantje">
<img src="text/home.png" onMouseOver="this.src='text/home2.png'" onMouseOut="this.src='text/home.png'" alt="Home" class="glassescase" id="thuis">
<img src="text/risoprints.png" onMouseOver="this.src='text/risoprints2.png'" onMouseOut="this.src='text/risoprints.png'" alt="Risoprints" class="glassescase" id="glassescase">
<img src="text/paintings.png" onMouseOver="this.src='text/paintings2.png'" onMouseOut="this.src='text/paintings.png'" alt="Paintings" class="glassescase" id="littlehouse">
<img src="text/tiles2.png" onMouseOver="this.src='text/tiles.png'" onMouseOut="this.src='text/tiles2.png'" alt="Tiles" class="glassescase" id="ceramic">
<img src="text/alphabet.png" onMouseOver="this.src='text/alphabet2.png'" onMouseOut="this.src='text/alphabet.png'" alt="Alphabet patterns" class="glassescase" id="green">
<img src="text/collage.png" onMouseOver="this.src='text/collage2.png'" onMouseOut="this.src='text/collage.png'" alt="Collage" class="glassescase" id="collage">
<img src="text/Tarotdeck.png" onMouseOver="this.src='text/tarotdeck2.png'" onMouseOut="this.src='text/Tarotdeck.png'" alt="Tarot deck" class="glassescase" id="tarot">
<img src="text/digital.png" onMouseOver="this.src='text/digital2.png'" onMouseOut="this.src='text/digital.png'" alt="Digital" class="glassescase" id="digital">
</div>
</div>
This is for a larger screen, this is the css:
Navbar2 is for the smaller screen.
#sidebar-wrapper {
margin-left: 0;
width:150px;
background-image: url("sidebar.png") !important;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
.navbar2 {
display: none;
}
.zijkantje {
position: relative;
display: flex;
align-items:flex-start;
margin-top:10px;
justify-content:space-around;
margin-left: 27px;
}
Hopefully this is enough code to figure out what goes wrong. I always find it more difficult to change a small detail from an already finished site hah. I'm new to coding btw, be kind :)
U can use the Inspector integrated on your browser to review the code, anyway:
Are u sure is the correct image route which you want to use ?.
Set the background-repeat and background-position properties to be sure the image shows correctly, and also background-size if necessary.
Check if sidenav have the background-blend-mode property, and removeit.
Related
.footer_image {
height: 60rem;
}
<footer>
<div class="footer_image">
<img src="https://via.placeholder.com/200x200" style="margin-left:20px">
</div>
</footer>
I cant seem to target the properties to change my image in my footer, what am I doing wrong?
You can use
.footer_image img {
}
This will work on all pictures which have the html img tag and are inside the .footer_image class
Or you can assign a class or id to your image to define its properties
<img class="mysuperfancyimage" src="logo_footer.png" style="margin-left:20px">
<img id="mysuperfancyimage" src="logo_footer.png" style="margin-left:20px">
You can call classes with a dot and and IDs with a Rhombus
.mysuperfancyimage {
}
#mysuperfancyimage {
}
This works nicely - the problem might be that you're targeting the image parent, not the image itself.
.footer_image > img {
height: 60rem;
}
<footer>
<div class="footer_image">
<img src="logo_footer.png" style="margin-left:20px">
</div>
</footer>
Please give me instructions how to fix some Blogger codes. I just made an image logo and put it beside my blog title (behind title and description/using awesome template). I got successful making the blog title clickable, but no success in finding how to make the image logo clickable. I also tried putting my URL in
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
still not changing.
I tried changing it in the Chrome console using this code it worked, but I don't know how to fix it in the source html.
<a href="#">
<div id="header-inner
</a>
I inspect the page and tried some CSS codes but only made me more confused. Please give me some instructions how to fix...Big big thanks to all.
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height'
expr:id='data:widget.instanceId + "_headerimg"'
expr:src='data:sourceUrl' expr:width='data:width' style='display:
block'/>
</a>
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
element.style {
background-image: url(//3.bp.blogspot.com/-
yjBU04mgpNw/W0l9tFJDjEI/AAAAAAAADRw/-
uOagCGc3cIhBSJsH3Zl4RetnKK_iuhUQCK4BGAYYCw/s1600/101bloggertips-logo.png);
background-position: left;
width: 120px;
min-height: 37px;
_height: 37px;
background-repeat: no-repeat;
}
You can add a div element to specifically target a smaller zone around your image and not the whole header.
Try replacing :
<a href="#">
<div id="header-inner
</a>
With :
<div class="header-inner>
<div class="logo-container">
<a href ="#">
<img src="Your image url" class ="logo_header" alt="My Logo">
</a>
</div>
</div>
Then you can add some css using your logo_container and logo_header classes as follow :
.logo_container {
width:200px;
height:auto;
display: block;
margin-left:auto;
margin-right:auto;
margin-bottom:60px;
}
.logo_header {
width:200px;
height:auto;
}
Hope it helps !
I'm new here and also somewhat of a beginner in Html and CSS. I'm currently working on a project using both CouchCMS for content management and then Bootstrap for the responsive framework. To give a short background, I've set up a custom.css file and have linked it accordingly to the website as well as the bootstrap css. I'm currently going through the steps to create a "Blog List" page to list all my blog snippets on one page, and basically what's happening is the sidebar is appearing on the right, but below the first element instead of side by side.
What I've noticed is that with just 1 post on the page it shows the way it's supposed to, however as soon as a 2nd is added it moves to the bottom half of the page on the right.
Here is my Code:
#main {
width: 90%;
margin: 40px auto;
}
#news-content {
float: left;
width: 60%;
margin: 0 3% 0 5.5%;
border-radius: 10px;
background-color: white;
}
#my-sidebar {
float: right;
width: 26%;
height: 100%;
margin: 0 5.5% 0 0;
border-radius: 10px;
background-color: white;
}
#cms-blog {
width: 90%;
height: inherit;
margin: 25px 0 0 5%;
}
<div id="main">
<cms:pages masterpage='news_entry.php' orderby='publish_date' order='asc'>
<!--Begin of CouchCMS Blog List-->
<div id="news-content">
<!--Wrapper for Left Side Blog Content-->
<div id="cms-blog">
<h1><cms:show k_page_title /></h1>
<cms:if k_page_foldertitle>
<cms:set my_category=k_page_foldertitle />
<cms:else />
<cms:set my_category='Uncategorized' />
</cms:if>
<h6><cms:show my_category /> • <cms:date k_page_date format='M jS, y' /> • <cms:show k_comments_count /> Comments</h6>
<hr />
<img src="<cms:show blog_image />" alt="" width="100%" />
<cms:show blog_content />
<p class="clearfix">Read More...
</p>
</div>
</div>
</cms:pages>
<!--End of CouchCMS Blog List-->
<div id="my-sidebar"></div>
<!--Wrapper for Sidebar-->
<div style="clear: both;"></div>
</div>
Another thing I've noticed is that when I go to the page which shows multiple blogs, CouchCMS automatically creates another news-content DIV. I'm thinking this may be the problem and the float:right is making the sidebar appear on the bottom right half of the page because it comes after the 2nd news-content, however if this is the issue, I have no idea how to fix it. I've been rearranging my code in different ways to try and see if I can fix it and have been searching the web for a few hours now and have come up with no solution.
Well now I feel like an idiot. I figured it out while rearranging the code. All that I had to do was change my cms:pages beginning and ending tags to only include the content of the post and not the div tags. Once I made the change, it immediately showed as I wanted it to.
My new code looks like this:
<div id="main">
<div id="news-content">
<div id="cms-blog">
<cms:pages masterpage='news_entry.php' orderby='publish_date' order='asc'>
<!-- I changed this to go after the beginning div tags instead of before-->
<h1><cms:show k_page_title /></h1>
<cms:if k_page_foldertitle>
<cms:set my_category=k_page_foldertitle />
<cms:else />
<cms:set my_category='Uncategorized' />
</cms:if>
<h6><cms:show my_category /> • <cms:date k_page_date format='M jS, y' /> • <cms:show k_comments_count /> Comments</h6>
<hr />
<img src="<cms:show blog_image />" alt="" width="100%" />
<cms:show blog_content />
<p class="clearfix">Read More...
</p>
</cms:pages>
<!--I changed this to come before the closing div tags instead of after-->
</div>
</div>
<div id="my-sidebar"></div>
<div style="clear: both;"></div>
</div>
I've looked different options for aligning the FB share button with the other social media buttons, but none have worked for me yet. I'm only a few pixels off. Any ideas?
<div style="float:left; vertical-align:top">
<a class="twitter-share-button" href="https://twitter.com/share" data-url="{my url}" data-text="{text}" data-count="none" data-hashtags="{hashtag}" data-dnt="true">Tweet</a>
</div>
<div style="float:left; padding: 0 0 0 5px; vertical-align:top">
<div class="fb-share-button" data-href="{my url}" data-layout="button"></div>
</div>
<div style="float:left; padding: 0 5px; vertical-align:top">
<script type="IN/Share" data-url="{my url}"></script>
</div>
!Social Media alignment1
Change your .fb_iframe_widget class to this
.fb_iframe_widget {
display: inline-flex; /* changed line */
position: relative;
}
The facebook button has still a misalignment of one pixel.
Just add this to the css class above:
top: -1px;
P.S.: wanted to add this as a comment but I couldn't because not enough "reputation" points.
I am trying to override the css from another file and I would like to know how specific of a reference I would need to override it.
Here is the page I am working with if you'd like to take a look:
http://www.bolistylus.com/shop/
This is what I'm trying to override:
.products li {
float: left;
margin: 0 10px 20px 0;
padding: 0;
position: relative;
width: 150px;
}
Here is the HTML I'm working with:
<div id="main">
<section id="primary"><div id="content" role="main"><div id="breadcrumb"><a class="home" href="http://www.bolistylus.com">Home</a> › Shop</div>
<h1 class="page-title">All Products</h1>
<ul class="products">
<li class="product first">
<a href="http://www.bolistylus.com/shop/boli-2/">
<img width="150" height="150" src="http://www.bolistylus.com/wp-content/uploads/pinkproduct-150x150.png" class="attachment-shop_small wp-post-image" alt="pinkproduct" title="pinkproduct" />
<strong>Boli Pink</strong>
<span class="price">$24.00</span>
</a>
Add to cart
</li> <li class="product ">
</li></ul><div class="clear"></div>
</div></section>
</div><!-- #main -->
.products li has a specificity of (0, 0, 1, 1)
a minimal higher specificity can be created with
ul.products li which has a specificity of (0, 0, 1, 2)
See this jsfiddle: http://jsfiddle.net/DAL9A/
.products li and you can use !important if it doesnt take. Try to load that after what your trying to override.
UPDATE*
Try just using ".product"
Actually just ready your comments. What are you trying to target? The image? If So you should get the width and height out of inline and apply it in CSS