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
Related
/* 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
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 currently working on my own Wordpress theme. I thought it'd be cool to have a dropdown box in the sidebar in which you can choose different themes, and it'll change the page background, border colors, etc a bit.
The thing is, for one theme (the default one) I have Javascript in my header.php file where the header image will change each refresh. I want this header image to go away when switching stylesheets, but it just overlaps the other one. How do I change this?
If you want to see for yourself, the box is in the right sidebar under the blue buttons. This is my testing website. Ignore the 000webhost stuff.
http://trainman1405.site11.com/wordpress/
Thank you!
The general solution here is to define all of your styles in one sheet, but namespace them so you can simply change the class on the body and the new styles will take effect. (You could also define them in separate sheets, using the namespaces, and simply reference every sheet in your <head>.)
For example, some CSS:
body a { color: #00f; } /* default */
body.green a { color: #090; }
body.red a { color: #f00; }
And then when you want to change it (using jQuery, although plain Javascript could do this job too):
$('#theme_select').change(function()
{
$('body').removeClass('green').removeClass('red'); // remove existing classes
$('body').addClass($(this).val());
});
it looks like you could use a javascript library its called jquery. You could use that to hide and display a new image e.g
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
function piczotheme() {
$("defualttheme").hide()
$("mountaintheme").hide()
//and then show load add your picture
$('#defualt').css("background-image", "url(url of the picture)");
}
</script>
and then you have to set up a button or something to trigger this effect
so...
<button onclick="piczotheme()"> click </button>
we are looking to place a semi-transparent welcome image on a clients Wordpress main index page, exactly like this http://www.editionsof100.com/.
I suspect this has been created using Jquery, would be possible to create something similar by adding to the CSS or index.php on WP?
This is quite simple, but pointless IMHO:
Create a div wherever you want the image located:
<div id="hello"><img src="http://tonkapark.com/projects/hello.png"></div>
Then you just use .fadeOut() on the element. Standard & simple jQuery
References:
http://api.jquery.com/fadeOut/
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Have you tried using rgba values?
Example:
div { background: rgba(200, 54, 54, 0.5); }
If you need some animations, check out this cool css library which it is very easy to use.
enter link description here
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>.