I need help with some CSS styling. I've tried various options with Firebug and cannot sort this out. How can I style the thumbnails on my posts (eg url: http://thatcriticguy.com/index.php?post/4/crossover-9-revamped-reinvented-and-a-must-have) and not style all images in the post at the same time. I have numerous posts on this site and need to only style the ones that are thumbnails that float right.
Is there a way to do this without modifying the template code just using CSS?
There's no way using pure CSS, because the thumbnails don't have an identifier that can distinguish them from the other images. Your only choices are either modifying the template code or using javascript to pick out the first image in a post and applying a style to it.
You need to have a "class" attribute on the images you want to style with CSS. This way your CSS will work only on the images you want.
For example you can have this HTML
<img src="..." class="thumbnail"/>
and this CSS:
.thumbnail {...}
If your posts' structure is always identical, this should do the trick:
.post-content p:first-child img
{ float: right }
It addresses all img elements in the first paragraph below post-content.
Not supported by IE 6. Source at Quirksmode.org
Related
Is there any way to hide certain tags in post info/meta via css ? Something like #tag-id { display:none }
Your CSS may be overwritten by the theme CSS file. Try with the following css:
display:none !important;
If it doesn't work, please provide the URL of your website.
Cheers,
Dam
I am working on a PHP file. I'm working on the menu bar, the menu bar contains all the image buttons, if someone hovers on one of the buttons I want them to change image(color). Could someone help me out with this?
$globalsettings = array(
'src' => $sImageURL.'global1.png',
'alt' => $clang->gT("Global participant settings"),
'title' => $clang->gT("Global participant settings"),
'style' => 'margin-left:5px',
'style' => 'margin-right:1px'
);
You can create hover effects using CSS (cascading stylesheets). Your CSS must be in an external stylesheet or embedded style element.
I'm using BUTTON that will style all <button> elements, but you can replace it with whatever element you want to style, such as an <img> with IMG (lowercase or uppercase).
BUTTON {
background: url(my_bg.png);
}
BUTTON:hover {
background: url(my_hover_bg.png);
}
If you don't know how to use stylesheets, just insert embedded styling into the <head> of your HTML document.
<style type="text/css">
/* Place CSS here */
</style>
If you want you can take it a step further and use CSS sprites (like old videos games used to do it). CSS sprites are a collection of images in one single image, and you simply change the position of the location of the background, and it creates the effect. You can achieve this like this:
#myelement {
background: url(my_bg.png) -0 -0;
}
#myelement:hover {
background: url(my_bg.png) -0 -100px;
}
There are also old school ways of hover effects but they're like Frontpage-era, so I don't recommend using them. CSS hover effects is the standard of today.
You're trying to solve 2 problems in one step. You need to get the images to display and then swap between them on hover.
You can't dynamically edit a button in JS (ok, you could with canvases and html 5 but it's non-trivial). So, you need to use CSS (or possibly JS) to to swap between 2 images.
Where those images come from is up to you - you can either pre-generate them which is a little work up front but easy to implement and no PHP required. This would be the preferred option if there's only one or two variations in colour.
Alternatively, you can have a PHP script which generates the images on-the-fly (and ideally caches them to save recomputing them later). This allows for infinite variation but requires more overhead on the server. This approach is commonly used to generate thumbnails as the source image isn't known in advance
Note that PHP has no control over when each image is displayed - it simply provides images to your CSS/JS in exactly the same way as a webserver would serve a static image.
If you want to edit an image in PHP, you need to look at the GD+ library
You can use css to do this quite easily by using the content: selector.
for example, your markup might look like this:
<div class="link" id="link1">
<img />
</div>
and the css would be something like:
#link1 a img{
content:url("http://www.maxxpotential.com/stephen2/wp-content/uploads/2013/03/Images-from-Deep-in-the-Woods-by-Astrid-Yskout-4.jpg");
}
#link1:hover a img{
content:url("http://blogs.mathworks.com/pick/files/zebrainpastelfield.png");
}
by using the selectors you assign in your script, you should find it pretty easy to amend this to suit your needs.
here is a working fiddle demonstrating this http://jsfiddle.net/pWYtu/1
You can use sprite image and onhover change position.
also you will get benefit of performance.
I have placed images on wordpress page templates without any inline style attribute but its seem wordpress automatically add style tag with width and height set to zero.
<img src="wp-content/themes/ecoblog/images/hiw-image-1.png" style="width: 0px; height: 0px;">
Sometimes height is set to its original dimentsions and sometimes after complete refresh its values are zero.
What is causing this?
Please help me out. Thanks in advance.
Maybe it is caused by incorrect CSS. Zero values should not have dimensions, like px or pt. Like this:
<img src="wp-content/themes/ecoblog/images/hiw-image-1.png" style="width:0; height:0;">
this is because of template CSS styles are override your image style properties ..,the easy way is to wrap your image content and give div id and put your style code in template CCS file
inside(style.css)
it works as:
.class{
width:20px !important;
height:20px !important;
}
or if you want to remove Inline CSS completely , This inline css may be in .php files or in.js files.
You can search style in whole project , it is easier to search if you are using netbeans code editor.
Hope it may resolve.
I'm using jquerys autocomplete widget but I'm having a few issues trying to style the box that drop down when you search for something.
I'm trying to move the box down a bit and change the border/bg color but some JS is adding in some embedded styles which are overriding my .css styles. But I can't find it.
I'v based mine off this one.
<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem">
In order to avoid using !important you could add your styles with jQuery and override them in that way.
$('ul.ui-autocomplete').css({
color: 'red'
});
Another solution would be to remove the style attribute from the ul.
$('ul.ui-autocomplete').removeAttr('style');
Without seeing your css styles, or the order you are loading the .css files, you could override the styles by using Firebug to inspect which classes are applied, and adding !important; to your main css styles.
Ex.
ul.ui-autocomplete {
color: red !important;
}
The best way you can combat this is to properly track down if your jQuery plugin has any parameters to help you, or strip the JS yourself and add your own CSS styles.
The above !important; rule can be a nightmare, it is a hack in a sense - but it may work for you.
Try to add margin-top and margin-left in your css
Overriding the top and left value is no good, because it is calculated in regard to the text field it derives from.
I'm really not a pro in jquery but I take a look around in the example you sent and the style of the menu is all givent by a menu style sheet (jquery.ui.menu.css). Look at the link below and there is some info that can help you I think.
http://docs.jquery.com/UI/Menu#theming
You will be able to customize the look and feel of your dropdown in these class.
«If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.menu.css stylesheet that can be modified.» From jquery website.
try using position or append to option...
you can refer here...
http://jqueryui.com/demos/autocomplete/#option-position
Check out the file jquery.ui.theme.css,
the class .ui-widget-content near the top can be used to put a background colour on the autocomplete search results box, borders and positioning can also be tweaked through this class.
I use CMS for client and client doesn't know CSS he use WYSIWYG editor to put content in pages. Client adds Paragraphs, images, images in paragraph (left or right floated), ordered and unordered list, Tables. Problems comes when he want to add images in paragraph (left or right floated). and without adding css class it's not possible. And i don't want to add <div> in content because WYSIWYG editor can't manage div and client works in WYSIWYG mode.
How to style content of pages without using css class?
You will need your user to add a CSS class/style attribute to the image somehow - without adding something to the image to tell it to float right or left it won't float right or left.
If your question is how the client can add the class without having to manually edit the HTML I reckon the only way is to dive into the WYSIWYG editor's javascript and write something a bit like this towards the end of the image-adding process:
var alignment = prompt("Type l to align the picture to the left, and r to align the picture to the right","l").strToLower();
if(alignment == 'r')
{
//line of code to add class "right" to the image tag
} else {
//line of code to add class "left" to the image tag
}
What the code to add the classes should depend on how the WYSIWYG editor works
You can try using element selectors or ID selectors to add styles to HTML elements without referencing CSS class in them.
Element selector would add border to all images on the page:
img { border:1px; }
ID selector would do the same only to image with ID 'image1':
img #image1 { border:1px; }
Still you will need to reference the stylesheet from your page.
There are lots of different ways you can make CSS Selectors that don't require CSS classes. For example, to make a rule that applies to all img tags inside p tags, you could write this:
p img { float: left; }
But how are you hoping to determine which images need to be right-aligned and which images need to be left aligned? Does that data exist in the document in any machine readable format?
A WYSWYG should have "align" property for an image (at least those I have seen). You can then use CSS attribute selector img [align=left] { float:left; } or img [align=right] {float:right;} This wont work on IE 6,7 though, you can use JavaScript to mimic this for those browsers.