/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'Flat-UI-Icons';
content: attr(data-icon);
speak: none;
I saw this code in one of the bootstrap theme template. How does data-icon or attr(data-icon) works? i cant seem to display the "image/words" of the example i had, it's empty now. I tried
text here
The text here's font doesnt seem to be the same as the example's one and also , the example didnt have anything between the a tags.
Please advice. Thank you
The css above will affect what happens before each instance of data-icon and not the link shown
They are a css3 feature. Attribute selectors alow you to to apply formatting to elements based on certain attributes.
[att^=val] – the “begins with” selector
[att$=val] – the “ends with” selector
[att*=val] – the “contains” selector
good description here which is where above taken from and here
Related
As you can see here: https://wildlatina.com/my-account/
the white body is not inside the page and there is not margin padding for the login form? what did I do to mess this up? I'm a beginner when it comes to editing with css so please go easy on me. Just would like the account page to look nice.
hi please login to your cpanel or ftp then open your theme style.css
find the css rule below
.full-width-content .container.grid-container {
max-width: 100%;
}
and comment the rule like this
.full-width-content .container.grid-container {
/*max-width: 100%;*/
}
and it will look like this
You have used the Wordpress theme GeneratePress. In that theme, if you have the class container and grid-container on an element, the width of that element is reset from 1080px to auto - which, in your case, means it fills the width of the page. So, your DIV with id "page" is changed from 1080px to the width of the page.
You should remove the container class from this DIV. You may then have to add some styles back to get the final effect you desire.
Hello You Can Style It By Using Some Plug-ins Which present at plug-ins>new one
for example you can go with this plug-in
https://wordpress.org/plugins/woocommerce-login-and-registration/
If You Cant Style It Please Post The Error You Are Getting Neatly And Most Probably You Can Use Wordpress Login For Woo-commerce But If You Are Really Interested To Use Only That You Can Customize It From CSS Or You Can Use Plug-ins Which Do The Same But No Coding Knowledge Required To Do It From Plug-in Because Everything is Graphically Done And whatever The Coding Part Is That Will Be Take Cared By Plug-in Itself So Maximum Use Plugins So It Could Better In Development
1) you can add this css add into theme or child theme style.css
.hfeed.site.grid-container.container.grid-parent{
width: 80%;
}
2) you can remove container class Here:
<div id="page" class="hfeed site grid-container container grid-parent">
my suggestion is second option is right
I have a filter element to filter data:
http://dualda.com/index.php?option=com_findme&view=info&layout=ranking&interval=7
And here I want the actual "bold" text as well in RED by using CSS. Any ideas?
e.g. this
<a class="redlink" href="/index.php?option=com_findme&view=info&layout=ranking&type=playerByActivity&lang=de">Gespielte Spiele</a>
Complement your CSS for redlink with this:
b .redlink, b .redlink:link, b .redlink:visited {
color: #EE2B4E;
}
Target the links inside b tags and his different states.
You need to apply a color rule in css:
a.redlink {
color: #F00;
}
That should do it, unless it's being overridden by another rule. If you insert CSS like this and you don't see a change, use a tool like FireBug or the code inspector in Chrome to see what CSS rules are being applied to the element and overriding your styles. You may have to make your rule more specific so that it takes priority and is applied.
You can also experiment with your page using jQuery to set styles on the fly. It's a great way to try things.
$('a.redlink').css({color: "#F00"});
I tried this in the console of my browser while viewing your page. The a tags with .redlink changed to red.
I'm working on a joomla 2.5 website and I'm using the SIGPlus plugin to display an image gallery. The gallery is displayed using the boxplus popup engine.
Most of the functionality is there out of the box but I want to add a new parameter, that defines the color of a 'topbar'. The topbar is a css property on the boxplus-viewer element and looks something like this:
.boxplus-viewer {
...
border-top: 10px solid <color>;
}
I'm trying to change the plugin syntax so that it takes an additional parameter 'topbar':
{gallery topbar=0099cc rows=15}joomlart/stories{/gallery}
so that the resulting css will look like this:
.boxplus-viewer {
...
border-top: 10px solid #0099cc;
}
My problem is that I don't even see the 'topbar' property as part of the $curparams array. I've added the topbar property to the sigplus.xml but it still gets removed. How can I add it to the list of accepted params?
Many thanks for your help!
Adding the parameter sigplus.xml is only helpful if you are going to only use what is entered in the plugin parameters to set the color of the top bar. If you want to add it as part of the plugin call, then you will need to edit sigplus.php (guessing on the file name, I have not looked at the plugin code). Somewhere in there you will find a regular expression that parses all of the parameters that are being passed in the plugin trigger. You will need to add to that so that the value entered is included in the $curparams array.
I'm trying to learn wordpress and php.
Basically, I want the
function draw_ad() {
echo "IMAGE CODE INSIDE A DIV";
// echoing an image inside a div -- StackOverflow does not allow me to post img tags : )
}
add_action('the_content', 'display_ad');
===
Basically, I want to add a picture and be able to manipulate the "left" and "top" css options... but with a plugin. So it will be like a strange picture that covers whatever the area on the screen that I want it to cover :P.
Yes, it is kind of sloppy, but that's what I was asked to do : P.
The add_action('the_content', 'display_ad') kind of does it, but it removes the whole content.
Is there a better way to do this?
Is there a way to tell the wordpress PLUGIN to add this , say, before the theme's header, and not content? (As in, be able to put this thing wherever you want to in the html body tags?
Thank you, guys!
From theme developing I am sure you can add code to the header and at the end of the body tag. (wp-header, wp-footer)
The best thing is to insert the picture tag at the end of the body and style it with position:fixed;. You don't need a div around the img tag.
On my Drupal site, I have made a Users page using the Views module, which is simply a nicely styled grid (HTML table) of users. I'm displaying a few fields for each one, and both the name and the profile picture have been set to link to the user node.
What is the best way to change it so that the whole cell (HTML td) links to the user node? EDIT: I'm not concerned with adding the HTML link tags, but with accessing each profile page's URL.
I've looked into modifying the theme of the view (over-riding the Style output e.g. views-view-grid--users.tpl.php), but cant see an elegant way to get the URL of the user node.
EDIT: I've implemented a temporary solution in javascript which looks into the HTML of each cell, extracts the first link's URL, and uses that, but is there not a better way of doing this using the Drupal variables somehow?
Thanks for your help.
How about something like this...no JavaScript needed
In your table:
<td>the link</td>
...
In your CSS file:
.td_link {
display: block;
width: 100%;
}
So basically all you need to do is add a class to your link, and a small snippet of CSS.
OK I found a better (super simple) way of extracting the profile URL, and also I over-came a few issues with the whole block-link solution (attributed to espais), which I thought were worth documenting. So here is the complete solution to my original problem:
1) Add a custom template file to override views-view-fields.tpl.php (see http://views-help.doc.logrus.com/help/views/using-theme - thanks to barraponto for the useful link). In this custom file, you should wrap all the code in a link, and add a clear-fix div just before the end to stretch the link to the full height of the container.
<a class="td-link" href="user/<?php print $row->uid; ?>">
...
<div class="clear-fix"></div>
</a>
2) Now you need to get rid of any other links from inside each grid element, as you are not allowed to nest HTML links (produces really weird behaviour). First thing to do is edit the View, and make sure none of the fields have "link this field to it's user" checked. Then if you want to include the profile picture field, you need to add a small fix module because by default there's no way to stop this field being a link! You can get the module from this comment: http://drupal.org/node/720772#comment-2757536
3) Finally the CSS. Add the following to your theme's style.css:
a.td-link {
display: block;
color: #000;
text-decoration: none;
border: 1px solid #E9EFF3;
}
a.td-link:HOVER {border-color: #85b3d4;}
a.td-link label {cursor: pointer;}
div.clear-fix {clear: both;}
This removes the link formatting from the text (as we want the whole block to look like a link, not just the text), and stretches the link out to fill the container. It also makes the cursor graphic consistent, and adds a nice border effect when you mouse-over the block. Remember you can also add a custom CSS class to your View, which makes it much easier/neater to select elements for styling in your CSS code.
It's important to distinguish between actual links, with <a> tags, and arbitrary elements you can click. Even if you don't care about semantics, you should care about your visitors not running JavaScript, especially search engines.
Rather than turning a block element into a link, you should turn a link into a block element, as espais suggested. One way to get more control over the markup is using custom fields to add opening and closing tags for your link around the rest of your fields.
spais and scott-reynen are right. but instead of placing every field under multiple <a> elements, each styled with css to turn them into blocks (which can have margin and padding), why not use a single <a> element?
if everything is meant to link to the same place, you can place it all together under a single <a> element, although every element should be an inline element (<span> instead of <div>). you can do it by changing the row template: check http://views-help.doc.logrus.com/help/views/using-theme
in your case, copy templates from inside the views module to your theme folder, and rename it accordingly as your view "Theme: Information" says. make sure there is no <div> or <p> or any other block element being output. if you need to break lines, use <br>.