I am very new to web development and PHP. May be this is simple question but searched a lot in Internet but couldn't find the solution.
I have this code in my CSS:
.categories .cat_sec {
float: left;
width: 232px;
height: 360px;
padding-top: 10px;
margin-right: 1px;
}
.categories .cat_sec h5 {
width: 232px;
color: #FFF;
padding: 10px 0px;
}
.categories .cat_sec .cats {
width: 232px;
height: 50px;
background-repeat: no-repeat;
padding-top: 259px;
}
.categories .cat_sec .cat1 {
background-image: url(../images/gold/bangles.gif);
}
And calling this CSS style in HTML by the following way:
<div class="cat_sec">
<h5> <?php echo $mCollections_array['SubCollectionName']; ?></h5>
<div class="cats cat1">
<ul>
<li>Some Text </li>
<li>SomeText</li>
<li class="viewall">View All</li>
</ul>
</div>
</div>
I have to change the image dynamically from the server. But i couldn't get any idea about changing the image in this line of code <div class="cats cat1">. In this cat1 represents the image already defined.
How do I add the image dynamically in the above code?
You can use inner CSS:
<div class="cats" style="background-image:url('your/path/to/image');">
<ul>
<li>Some Text </li>
<li>SomeText</li>
<li class="viewall">View All</li>
</ul>
</div>
Based on what you have said to me: You want to edit a CSS file with PHP
See this, this annddd this
You can also embed PHP into the CSS file to do these kinds of things for you.
working on answer now
Related
I created a webpage with a dynamic footer. In the footer I have a facebook icon. when I preview the page the image does not appear. All other css files are working fine except for the footer. Could anyone tell me what I am missing?
My footer template:
<footer>
<div class="icon-text">
<div class="icon-text-text">
<ul class="footer-nav">
<li>Terms and Conditions</li>
<li>Shipping Information</li>
</ul>
</div>
</div>
<div class="icon-text">
<p class="email_text">Follow me on</p>
<a href="#">
<img class="social-icon" src=../icons/facebook.png"
alt="Facebook">
</a>
</footer>
<footer class="second">
<p>© All Rights Reserved</p>
</footer>
<!--End of Footer Section-->
Here is my css for the footer section:
footer {
background-color: pink;
border: 2px solid black;
box-shadow: 5px 5px 3px rgba(0, 0, 0, .65);
width: 1350px;
max-height: 300px;
overflow: hidden;
}
.icon-text {
width: 50%;
float: left;
text-align: justify;
text-align: center;
}
.icon-text-text {
font-size: 150%;
}
img.social-icon {
height: 45px;
width: 45px;
}
.email_text {
font-size: 150%;
}
And here in the php on the index page to add the footer:
<?php include_once("templates/template_footer.php"); ?>
There are other things wrong with the footer like I can't get the wording to move to the left but the image is whats important. Any ideas on how to fix this?
Assuming your path was correct, Please check it out.
<link rel="stylesheet" type="text/css" href="<?php include_once('templates/template_footer.php'); ?>">
Does anyone know how I can code the round icon along with clickable social media icons in the picture?
The site in question is: http://subwayisgay666.my-free.website/
Thanks for your help
This will be enough for you to start on the structure
header > div {
display: flex;
width: 100%;
max-width: 955px;
margin: 0 auto;
padding: 60px 0 40px;
}
header .logo {
display: block;
width: 170px;
height: 170px;
margin-right: 20px;
border-radius: 100%;
flex-grow: 0;
}
header .introduction .title {
padding: 30px;
}
header .social, header .main-menu {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
header .social li + li,
header .main-menu li + li {
margin-left: 15px;
}
header .main-menu li a {
display: inline-block;
padding: 10px;
text-transform: uppercase;
}
<header>
<div>
<a class="logo"><img alt></a>
<div class="introduction">
<div class="title">
<h1>Name</h1>
<p class="subtitle">Joker, gentleman & student extraordinnaire</p>
</div>
<ul class="social">
<li class="facebook"><a><img></a></li>
<li class="google-plus"><a><img></a></li>
<li class="twitter"><a><img></a></li>
<li class="linkedin"><a><img></a></li>
<li class="youtube"><a><img></a></li>
<li class="behance"><a><img></a></li>
</ul>
</div>
<div class="navigation">
<p>Add your introduction text here. Your homepage should be the first page that visitors to your site see, so make sure you give a concise overview of who you are, what you do and why you are right for them.</p>
<ul class="main-menu">
<li><a>About</a></li>
<li><a>Resume</a></li>
<li><a>Contact</a></li>
</ul>
</div>
</div>
</header>
I am working in Wordpress but am new to PHP. I built a very very simple page using HTML and CSS. It consists of one image to the left and three lines of informational text that are suppose to wrap on the right side. It works and looks perfect before I loaded it to Wordpress and now it is not wrapping.
What am I missing?? Below is the fiddle.
.ciao {
margin-right: 20px;
margin-left: 60px;
margin-top: 30px;
}
.ciaolist {
list-style-type: none;
display: inline-block;
}
<div>
<img src="http://via.placeholder.com/1600X1067" alt="" class="ciao" style="width:55%">
<ul class="ciaolist">
<li>contact#website.com</li>
<br>
<li>+1 234 567 8900</li>
<br>
<li>united states, us</li>
<br>
<br>
</ul>
</div>
Thank you.
You do something like this;
.post-container {
margin: 20px 20px 0 0;
border: 5px solid #333;
overflow: auto
}
.post-thumb img {
float: left;
}
.ciaolist {
list-style-type: none;
display: inline-block;
}
.ciao {
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
<div class="post-container">
<div class="post-thumb"><img class="ciao" src="http://via.placeholder.com/1600X1067" width="55%" /></div>
<div class="post-content">
<ul class="ciaolist">
<li>contact#website.com</li>
<br>
<li>+1 234 567 8900</li>
<br>
<li>united states, us</li>
<br>
<br>
</ul>
</div>
</div>
When pulling the_content() in WordPress for a testimonial section, I tried adding quotes (fontawesome) before and after it, but they appear on top and below the content, rather than inline with it.
Here's the code:
<blockquote>
<i class="fa fa-quote-left quotes"></i>
<?php the_content(); ?>
<i class="fa fa-quote-right quotes"></i>
</blockquote>
Would anyone know how to concatenate them in order for them to appear inline with the content text?
Thank you all in advance.
Well you can achieve it by using CSS
HTML
<blockquote>
<div class="testimo-content">
<?php the_content(); ?>
</div>
</blockquote>
CSS
.testimo-content:before,
.testimo-content:after {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 0.6em;
vertical-align: super;
}
.testimo-content:before {
content: "\f10d";
margin-right: 5px;
}
.testimo-content:after {
content: "\f10e";
margin-left: 5px;
}
I have a css menu which has a width of 400 for non-Admins... and a width of 500 for Admins. If I set the UL width to 500, the menu centers fine and nicely for Admins. But for non-admins, whose mneu is really only 400 wide... it's off-kilter.
So I removed the width attribute from the UL to try and remove this and then it lost centering altogether; the whole menu is now stuck to the left side of the container.
Anyone have a simple idea for how to make it always centered? Site is here:
http://www.runic-paradise.com/
ul.menu{
height: 40px;
list-style: none outside none;
margin: 0 auto;
/*width: 500px;*/
}
/*li{
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}*/
a.menu{
color:#FFF;
text-decoration:none;
}
p.menu{
padding-top: 10px;
padding-right: 5px;
padding-left: 5px;
}
.subtext{
padding-top: 10px;
}
ul.menu li{
width: 100px;
height: 40px;
float: left;
color: #191919;
text-align: center;
overflow: hidden;
}
/*Menu Color Classes*/
.green{
background:#6AA63B url('/img/menu/green-item-bg.jpg') top left no-repeat;
}
.yellow{
background:#FBC700 url('/img/menu/yellow-item-bg.jpg') top left no-repeat;
}
.red{
background:#D52100 url('/img/menu/red-item-bg.jpg') top left no-repeat;
}
.purple{
background:#5122B4 url('/img/menu/purple-item-bg.jpg') top left no-repeat;
}
.blue{
background:#0292C0 url('/img/menu/blue-item-bg.jpg') top left no-repeat;
}
<ul class="menu">
<li class="green">
<p class="menu">Home</p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p class="menu">-</p>
<p class="subtext">More info</p>
</li>
<li class="red">
<p class="menu">Forums</p>
<p class="subtext">Get in touch</p>
</li>
<li class="blue">
<p class="menu">-</p>
<p class="subtext">Send us your stuff!</p>
</li>
<?php
if ($user->data['group_id'] == 5)
{
echo ' <li class="purple">
<p class="menu">Admin</p><p class="subtext">Legal things</p>
</li>';
}
?>
</ul>
Your CSS sets the ul.menu width to 400px. If the user is admin, the php script adds another 100px wide li to ul.menu. When this happens, you have to set the ul.menu width to 500px. If you do this, the css rule margin:0px auto; will handle the centering as expected.
A simple jQuery fix would be something like this:
<script>
$(document).ready(function() {
var menu=$('ul.menu');
if(menu.find('li')>4) {
//if there are more then 4 menu items, reset menu width to 500px
menu.css('width','500px');
}
});
</script>
Use max-width:500px;for UL.Demo for these http://jsfiddle.net/dhanith/ZMB93/
Can you please try this,
In animated-menu.css (demo url: http://www.runic-paradise.com/), Change margin style as like below
ul.menu {
height: 40px;
list-style: none outside none;
margin: auto 25%;
}