How can I add a logo + title to a Yii2 web app?
I used concatenation to stick logo to title (as below)
NavBar::begin([
'brandLabel' => '<img src="favicon-32x32.png"; class="img-responsive">'.'Car Management System',
and it worked but the logo appeared on top of the title.
Is this a wrong way to make it?
Or is it right but it needs some style properties changed?
See if this works for you, it just changes the <img> syntax to be correct:
'brandLabel' => '<img src="favicon-32x32.png" class="img-responsive"/>Car Management System',
If you are having problems with the image and the text not sitting on the same line, you probably want to replace the img-responsive class with the pull-left class... or just remove the img-responsive class and it may start working (depending on the styles already applied to the image). Example:
'brandLabel' => '<img src="favicon-32x32.png" class="pull-left"/>Car Management System',
I have the same issue, in addition I have a square image of 48x48. I have solved it like your initial solution but with the help of the following style attribute's values:
...
'brandLabel' => '<img src="logo.png" style="display:inline; vertical-align: top; height:32px;">My Company',
...
The final result is shown in the following screen shot:
Related
I cannot get my custom CSS to override bootstrap on this site.
I've programmed using bootstrap on many platforms and have never had any problems, but I'm working on a WordPress site for a client and nothing I do is working. I can't assign background colors or similar customizations into classes and stick them in divs, because they just refuse to show up. I can't even use pre-existing bootstrap classes and put them into divs. It's like my CSS file doesn't exist. Basic example:
.my-blue-background {
background-color: blue;
}
<div class = "container my-blue-background">
...
</div>
Or even:
<div class = "my-blue-background">
<div class = "container">
...
</div>
</div>
Or Even:
<div class = "container text-center">
<h1>Hello World!</h1>
</div>
Or even:
<div class = "container">
<h1 class = "text-center">Hello World!</h1>
</div>
I've tried using !important. I've tried just copying CSS files and pages from other themes just to see if they would work, and they do, but if I try to change absolutely anything on their custom style sheet, it doesn't show up. I've tried just deleting their custom stylesheets entirely and it won't even show up on my website that something different has happened. I have tried clearing my cache, and I've tried viewing the website on different browsers and different computers. My enqueues are set up correctly, to the best of my knowledge, as I've tried both:
wp_register_style('bootstrap', get_template_directory_uri() . '/inc/css /bootstrap.min.css', false, '4.0.0', null);
wp_enqueue_style('bootstrap');
wp_register_style('customstyle', get_template_directory_uri() . '/inc/css/custom.css', false, '0.0.1', null);
wp_enqueue_style('customstyle');
And:
wp_register_style('bootstrap', get_template_directory_uri() . '/inc/css /bootstrap.min.css', false, '4.0.0', null);
wp_register_style('customstyle', get_template_directory_uri() . '/inc/css/custom.css', false, '0.0.1', null);
Is there something wrong with my configured settings?
I see some wrong spaces in your html outputs
<div class = **the space here is wrong** "container text-center">
The correct one is:
<div class="container text-center">
If you want to make sure that the custom style is loaded after the bootstrap style you should do this:
wp_register_style('bootstrap', get_template_directory_uri() . '/inc/css /bootstrap.min.css', false, '4.0.0', null);
wp_enqueue_style('bootstrap');
wp_register_style('customstyle', get_template_directory_uri() . '/inc/css/custom.css', array('bootstrap'), '0.0.1', null);
wp_enqueue_style('customstyle');
If that doesn't solve it, a link to the website would help a lot.
The problem turned out to be the cache on the WordPress server side, which wouldn't load my new edits in a reasonable amount of time, making it appear like I couldn't override bootstraps presets. Though I'm not sure it's the proper fix, it was resolved by changing the CSS and Javascript enqueues to:
wp_enqueue_style('customstyle', get_template_directory_uri() . '/inc/css/mystyle.css', array(), rand(111,9999), 'all' );
wp_enqueue_script('customjs', get_template_directory_uri() . '/inc/js/myscripts.js', array(), rand(111,9999), true);
It forced the server to reload my new stylesheets and scripts, giving me immediate changes.
I've made a small image gallery with 'Image Thumbnail Viewer 2' Link here
script allows title attribute below image that is expanded. Everything works fine but I cannot find a way to style the text in the title attribute.
All i want to do is change some basic features i.e. font-family, font-size, margin etc. nothing fancy.
<tr>
<td>
<a href="img/test%20images/IMG305eng.jpg"
rel="enlargeimage"
rev="targetdiv:main,trigger:click,preload:yes,fx:fade"
title="<em>Hello World</em> - 2014 - 20x30x5cm">
<img src="img/test%20images/IMG305eng.jpg">
</a>
</td>
</tr>
above is an example of one image thumbnail
Each image will will need a different caption underneath it. not sure if its worth using the title attribute or just doing it another way entirely.
Thanks - second post on stack-overflow so let me know if i'm doing anything wrong.
You need to target the markup (HTML) that the plugin generates as #Aziz has pointed out.
Your text (when hovering an image) is contained in an element with the ID of #loadedarea.
#loadedarea {
font-weight: bold;
color: red;
}
you may need to modify the js script to insert a specific tag :
example: instead <br/> i added a <p> https://jsfiddle.net/x7w12etr/2/ (fixed and updated fiddle)
modified: (notice that you can add a class or id to this extra tag holding the alt attribute value of image)
if (setting.link)
imghtml=''+imghtml+''
imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<p>'+$anchor.attr('title') : '')+'</p></div>'
return $(imghtml)
}
From here you can target that p with css .
original:
if (setting.link)
imghtml=''+imghtml+''
imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'
return $(imghtml)
},
In layouts\main.php I added an image which should be shown on every page at the same place (header). I added following code in main.php (layout):
...
<div class="intl">
<a href="http://www.example.org" target="_blank>
<img src="../files/wsk/design/intl.png" alt="Text" align="right"> </img>
</a>
<br>
International
<div>
...
The image is shown on the homepage but not on subpages like About or Contact as shown on the pictures attached. Would be glad if anybody could tell me why.
This is because you used related path for image (with ..).
It's recommended to place such images in web accesible directory (web), in subfolder images for example, then access it like that: /images/design/your-image-name.jpg.
If your image is outside of web accessible directory, alternatively you can use assets to publish it there.
Looks like it might be to do with using the relative URL in your img tag. Try this:
<img src="<?php echo Yii::app()->baseUrl; ?>files/wsk/design/intl.png" alt="Text" align="right">
If that still doesn't work, check your baseUrl in your configuration is correctly pointing to the folder with your index.php to make sure your URLs are all resolving properly.
In your layouts/main add Html helper
<?=
use yii\helpers\Html;
?>
Now you can display the image by
<?= Html::img('path/to/your/imagefile', ['alt' => 'text', 'height' => '28', 'width' => '112']) ?>
or you can create a uploads folder in the root of the project and create an alias for it. That will make your job easy for image display in all the pages. You can use the below code to display an image if alias is set for uploads folder
<?= Html::img('#uploads/imagefile', ['alt' => 'text', 'height' => '28', 'width' => '112']) ?>
This is driving me crazy. I have a small image, and I want to display a larger version when the user hovers their cursor over it. So, I have this:
$("#Portrait").popover({
html: true,
container: 'body',
trigger: 'hover',
content: function () { return '<img src="~/Images/person.jpg" width="100" />'; }
})
<img src="~/Images/person.jpg" width="50" id="Portrait" class="img-circle img-responsive hidden-xs" />
This isn't exactly how I want it to work, but I've simplified it a lot to try and make it work and it still won't. As you can see, the page to the image is identical in the jQuery function and in the HTML markup. When the page loads, the image displays correctly, but in the popover I just see the image placeholder that you get when the image path is incorrect.
If I replace the code for the image in the function, whatever I write displays correctly in the popver, so the code to populate the popver with HTML is working. When I replace the path to the image in the function with a URL to an online image, that image displays correctly in the popover.
The problem seems to be very specifically with the path to the image in the function. It fails to work both when debugging on my machine and after publishing to the web server. I've tried moving the image to the same folder as the page so that the path can simply be person.jpg, but that doesn't work either.
Any ideas?
I still don't fully understand why, but I'm guessing that reliance on the tilde (~) to specify application root is a bad habit I've carried over from coding in ASP.NET. Anyway, I fixed this problem by using the Url.Content helper to get the correct path to the image, like this:
$("#Portrait").popover({
html: true,
container: 'body',
trigger: 'hover',
content: function () {return '<img src="' + "#Url.Content("/Images/person.jpg")" + '" width="100" />'; }
})
<img src="~/Images/person.jpg" width="50" id="Portrait" class="img-circle img-responsive hidden-xs" />
I am new to web building. Currently following a tutorial for making an image gallery.
http://www.webreference.com/programming/css_gallery/index.html
It all works okish (enough for me to fix things to my liking) apart from the thumbnail section. Below is a snippet of the html and css for the thumbnails which I think is relevant to the help I seek. Basically, when you hover over the thumbnail, the main image will appear in a free space in the page above. That kind of works (image doesnt appear in the right place, but I can fix that no probs) but the thumbnails are not displaying my images.
I changed the container div to "gallery" as I already have a container in my html, and dont want it to be affected by the new css following the tutorial...
html:
<li>
<a class="gallery slidea" href="#nogo">
<span>
<img src="images/Picture 014.jpg" alt="Wedding" title="Wedding" />
<br />
Wedding
<br />
Outside area wedding
</span>
</a>
</li>
CSS:
#gallery a.slidea {
background:url(images/Picture 014 thumb.jpg);
height:38px;
width:50px;
}
Also for my CSS, the W3C validator says " #gallery a.slidea " Value Error : background Parse Error thumb.jpg) which I dont understand.
Would love some help :D
Cheers
P.S I'm looking at putting this website onto wordpress (thats a tutorial I'll follow later on with more success I hope)
Your error is here:
background:url(images/Picture 014 thumb.jpg);
That space is throwing it off. Put the url in quotes:
background:url('images/Picture 014 thumb.jpg');
The other problem is in your HTML.
Your CSS says #gallery a.slidea
This would point at all links with the class 'slidea' that are in an element with the id of 'gallery'. Your HTML indicates that the link is of class 'gallery' and 'slidea'. The right way to do it would depend on your goals.
The call to the class doesnt match the name of the class
<a class="gallery slidea" href="#nogo">
is calling
#gallery a.slidea {
Try making them the same name, e.g.
<a class="gallery_slide" href="#nogo">
#gallery_slide a {