I have a navbar.php that is called in the index.php.
The navbar looks and works fine but in one of the tabs I just have the word Logo and I wanted to replace it with an actual image. Just like many websites have it. I've seen many people using bootstrap however I'm not familiar with that at all. What is wrong with the PHP and CSS I'm trying to use?
Path of navbar.php
project/file.css
Path of image.png
project/img/image.png
navbar.php
<div class="navbar">
<a class="logo" href="#" img src="img/image.png"></a>
<div class="navbar-right">
<a class="active" href="../index.php">Home</a>
About
</div>
</div>
style.css
/*Logo*/
.navbar a.logo{
display:block;
width: 300px;
height: 200px;
background: url(img/image.png) 0 0 no-repeat;
}
Your problem with the HTML markup is here
<a class="logo" href="#" img src="img/image.png"></a>
By the above markup, you are saying that a hyperlink should be an image or should act as an image or something like that. This doesn't make sense.
What you can do is you can visit this website:
http://www.icons8.com and search your icons accordingly. You can also download it and store it in your system folder.
Once you have done this, you can write the above code as follows:
<div class="navbar">
<a class="logo" href="#"><span><img src="yourImgURLHere"/></span> </a>
<div class="navbar-right">
<a class="active" href="../index.php">Home</a>
About
</div>
</div>
Hope this helps.
Related
I'm working on our company website. We want to make our logo image change, by changing website's language.
this is where our logo code located inside < header > tag:
<nav id="nav" class="menu-btn-parent">
<a href="/" class="logo"><h1>
<img src="<?php echo get_template_directory_uri()?>/assets/img/common/logo-small.png">
</h1></a>
</nav>
How can I make /assets/img/common/logo-small.png image to change by changing website language from mysiteurl/en to mysiteurl/de ?
We are using wordpress.
Thank you.
We are using qTranslate plugin.
add this in your css
.l-header #nav .logo h1{background: none!important;}
.l-header #nav .logo img{opacity:1!important;}
I'm working on a Gallery Web page and I have different size images stored in local server. What I want is to make my gallery look like this. Simply saying I want to keep Division size same for all image sizes. Also image should cover whole area.
What I tried
I suppose to use PHP to get image locations and do this task. So I'll paste PHP file.
<?php
$itemNum =$_POST["itemNum"] ;
$folderName = $_POST["folderName"];
echo '<div class="col-md-4 mix category-a" style="margin:10px;height:300px;width:400px">
<div class="single-portfolio" style="height:300px;width:400px;overflow: hidden;">
<a class="gallery-item" href="gallery/'.$folderName.'/'.$itemNum.'.jpg"><img class="img-responsive" src="gallery/'.$folderName.'/'.$itemNum.'.jpg" alt="One" /></a>
</div>
</div>';
die();
?>?>
My Problem
This code doesn't do what I want. I tried every way I know to make this possible. Can someone help me to get what I want? Thanks.
EDIT:
This is what I got. Can see that size changes according to image size
Set max-height and max-width of div and also fix height of image :
<div class="single-portfolio" style="max-height:300px;max-width:400px;overflow: hidden;">
<img style="height:300px;width:400px;" class="img-responsive" src="gallery/'.$folderName.'/'.$itemNum.'.jpg" alt="One" />
All you have to do is playing with css and its so easy to apply. You have fixed height of image and that is 400px.
So css for the div will be
.category-a {
height: 400px;
}
.img-responsive {
display: block;
max-width: 90%;
max-height: 400px;
margin: 0 auto;
}
And your HTML will be like this. Please don't apply inline css as its always bad practice to use like this. instead use class.
<div class="col-md-4 mix category-a">
<div class="single-portfolio">
<a class="gallery-item" href="gallery/'.$folderName.'/'.$itemNum.'.jpg"><img class="img-responsive" src="gallery/'.$folderName.'/'.$itemNum.'.jpg" alt="One" /></a>
</div>
</div>
I'm building a Wordpress template (using PHP).
My basic page setup:
Nav bar at the top (not fixed there; disappears upon scroll)
100% width picture w/ text typed over it (hence why I'm using a background image)
The rest of the content
My problem is when I try to resize the height of the window (make it smaller), the picture collapses, and leaves the words over it kind of out in space. How can I code this to make the background image shrink to contain the words, then stop shrinking when it gets there? (Image included at the bottom).
Here's my HTML:
<!-- div w/ BG image -->
<div id="introParagraph" class="m-b-2 p-y-2">
<h1 class="text-xs-left col-xs-10 col-md-offset-1 m-b-1">Our <br> approach</h1>
<!-- Inner div that styles a paragraph inside pic -->
<div class="col-md-3 col-md-offset-1 col-xs-6 m-t-1">
<h3 class="text-xs-left" id="question">How we help you figure out what works for you and your business. <br><br> Click on the icons to learn more. </h3>
</div>
</div>
And here's my CSS:
/******** MEDIA QUERIES *********/
#media (min-width: 650px){
#introParagraph{
background: url("../img/approach.png");
background-size: cover;
background-position: center;
min-height: 45%;
}
Finally here's the full code with PHP:
<!--------------- Approach Intro -------------------->
<div id="introParagraph" class="m-b-2 p-y-2">
<?php
if (have_rows('approach_introduction')):while(have_rows('approach_introduction')):the_row();
?>
<h1 class="text-xs-left col-xs-10 col-md-offset-1 m-b-1">
<?php
the_sub_field('page_header');
?>
</h1>
<div class="col-md-3 col-md-offset-1 col-xs-6 m-t-1">
<h3 class="text-xs-left" id="question">
<?php
the_sub_field('page_description_paragraph');
?>
<br><br> Click on the icons to learn more. </h3>
</div>
<?php endwhile;
else :
// no rows found
endif;
?>
</div>
IMAGE TO SEE WHAT'S GOING ON:
IMAGE TO SHOW WHAT IT LOOKS LIKE ONLOAD, WITHOUT SCROLLING DOWN (Except I want the horizontal nav in the white space above the big picture):
Brandon, I think you want to set that inner div to position absolute and play around with it from there. You should set an ID for the inner div and then give it some attributes in your external css, including that position: absolute I mentioned. Make sure to add, position:relative; to your introParagraph div as well.
CSS
header.site-header .wrap {
background: url(http://jadeluxurycondos.com/jadeluxurycondos-new/wp-content/uploads/2014/04/header-banner.jpg) right top no-repeat;
}
This is what I am working with.
Any insight would be grateful.
Here is the home.php code.
You cannot do this using CSS.
What you've done here is just passed the URL for the background.
If you want to add a link to the image, you can do this either by using a pair of anchor tags.
EG:
Add this in your HTML :
<a href='#'>
<img src="...." />
</a>
OR by adding a click event on to the div.
EG:
$(document).ready(function(){
$('header.site-header .wrap').click(function(){
window.location.href = "Link";
});
});
You could do something simpler:
<div>
<a href="#your-link" target="_blank">
<img src="http://jadeluxurycondos.com/jadeluxurycondos-new/wp-content/uploads/2014/04/header-banner.jpg" width="740px" height="104px" alt="Some other title" title="Some title" />
</a>
</div>
This creates a link that is an image.
EDIT after more info came to light.
From what I've gathered so far... you're using the "Open Floor Plan" Theme for Wordpress. (Maybe ask them for support? After all you paid for a theme.)
The simple method and recommended:
That theme appears to have a widget position at the top right. Why not use that to add your banner-link?
The hard-way hacking not-recommended method:
In wordpress you can edit the theme files (not recommended) by going to Appearance then Editor. This will open up the theme editor view and on the right side you'll see all the files of the currently active theme. You then could search those files for the HTML tag and add the above modifications.
The file that could have what you're looking for could be the header.php or index.php, but if it isn't there just sift through the other files until you find it.
The html markup would look something like this:
<header class="site-header">
<div class="wrap">
It will contain more stuff in here...
</div>
</header>
It will probably contain a lot more classes and PHP code...
The Widget Method
Add your banner code in a Text widget. You can add the CSS styling in-line, so that you won't have to upload anything else.
Add the CSS property for the parent container:
<style>header.site-header .wrap { position:relative; }
Then add the CSS for your element:
.mybanner { position:absolute; top:0; right:0; z-index:1; }
/* the widget with the social icons will probably need z-index aswell */
.CLASS-of-other-widget { position:relative; z-index:2; }
</style>
Now add your HTML code:
<div class="mybanner">
<a href="#your-link" target="_blank">
<img src="http://jadeluxurycondos.com/jadeluxurycondos-new/wp-content/uploads/2014/04/header-banner.jpg" width="740px" height="104px" alt="Some other title" title="Some title" />
</a>
</div>
Please note that with the z-index, the other widget will cover the banner and the ability to click it. You could simply use another position for that widget and just have the banner there.
Hi all and thank you for the help.
I have found a solution. I left the image on the BG, then added a widget to the top right of the page where the image (banner sits), then added a text box to the widget area and added this
<div class="topbanner" onclick="window.location='http://jadeluxurycondos.com/jadeluxurycondos-new/jade-signature/'" style=" height: 102px;left: 37.5%;position: absolute;top: 0; margin-top: 32px;width: 585px;cursor: pointer;"><div>
The image appears to be clickable. Check here to see it in action.
HI I installed http://css-tricks.com/examples/AnythingSlider/#panel-4 and it works perfect.
But I cannot link a particular slide to a website. I tried the below code but for nothing..
Can someone offer an alternative?
<li style="width: 650px; height: 270px; class="panel">
<a href="'.$slide['link'].'">
<img alt="'.$slide['alt'].'" src="images/home_slideshow/'.$slide['img'].'"
style="width: 100%; height: 100%;">
</a>
</li>
The html/php parses good in the browser... so thats not the issue..
Does this support links ?
You're not closing the style attribute.
<li style="width: 650px; height: 270px; class="panel">
should be:
<li style="width: 650px; height: 270px;" class="panel">
Whilst it may parse well in the browser, if the plugin you are using is looking for a "panel" class for an event then it wouldn't find it.
Also if this is in html and not being generated by php then you need <?=$variable?> rather than '.$variable.' as you've been using