In Joomla how can I add a style to a article like this?
I try to edit the html in the editor but the editor deletes everything inside style
<style>
span{
color: #0099ff;
}
img{
float: right;
}
</style>
<div>
<h3>
<span>
<strong>
<em>Water Innovation through Dissemination & Exploitation of Smart Technologies</em>
</strong>
</span>
</h3>
<img src="/images/home/ict4water_projects_logos.png" alt="ICT4Water projects logos" width="400" height="225"/>
</div>
You can temporarily turn OFF the editor at the global settings to save an article or setup allowed tags list at the editor settings.
It's better to avoid embedded CSS whenever possible. Have you tried adding your custom CSS to your template's template.css file (or a custom.css file if it has one)?
In lieu of that, what Victor Yuoshev suggested will work HOWEVER any future updates to that particular article will always have to be done with the editor turned off, otherwise when you go to save it your embedded CSS will just get stripped out again.
Related
My friend is using the Avada WordPress theme, and has currently upgraded the latest version of WordPress (via the admin panel I assume as no physical files have been uploaded).
His page titles (H1) are no longer responsive as they were before he upgraded. The title stays the full width of the page when resizing the browser.
This is how the header is placed on the top of the page (within the admin):
[fullwidth backgroundcolor="no" backgroundimage="" backgroundrepeat="no-repeat" backgroundposition="left top" backgroundattachment="scroll" bordersize="0px" bordercolor="" borderstyle="solid" paddingtop="0px" paddingbottom="0px" paddingleft="0px" paddingright="0px" menu_anchor="" class="big_title" id=""][four_fifth last="no" class="" id=""][title size="1" content_align="left" style_type="single" sep_color="#ffffff" class="" id=""]H1 PAGE TITLE HERE[/title][/four_fifth][one_fifth last="yes" class="" id=""][button link="http://www.arttouchesart.com/about/" color="custom" size="medium" type="flat" shape="square" target="_self" title="" gradient_colors="#ffffff|#ffffff" gradient_hover_colors="#000000|#000000" accent_color="#000000" accent_hover_color="#ffffff" bevel_color="" border_width="2px" shadow="no" icon="" icon_position="left" icon_divider="no" modal="" animation_type="0" animation_direction="left" animation_speed="1" alignment="right" class="" id=""]ABOUT[/button][/one_fifth]
I have located the big_title class within the CSS, which is in a custom.css file:
.big_title h1 {
font-size:56px;
line-height:56px;
text-align:left!important;
}
Is there a simple CSS trick to allow the H1 to re-size once the browser is made smaller?
Without looking at the rest of the styling, it would be difficult to say how to do this neatly. But, you could try:
.big_title h1 {
/* All your other CSS here */
max-width: 100% !important;
}
Note - I've added the !important declaration, only as a fail safe. Test it first without, and do not include it if it works. If it doesn't work, add it and see if that helps.
If still no joy, you'll need to right click on the h1 tag (in your web browser) and then click "Inspect" (assuming you're using Google Chrome, there will be a similar feature in IE, Firefox and Safari). You'll then need to use Element Inspector to look at the CSS properties being applied to that tag and work out how to override them in your custom.css file (like we've just attempted).
I'm a very beginner using a plugin in WooCommerce and the plugin that show a sentence before the price, and I need to invert its order.
Now is:
You can earn 2 points $100 (in a single line)
Where: "You can earn 2 points" is the message from <span class="wc-pts-rwd-product-message"> and $100 is from <span class="amount">
The html is this:
<div class="single_variation">
<span class="price">
<span class="wc-pts-rwd-product-message">
<span class="amount">$100</span>
</span>
</div>
How should I write the css to make it show like:
$100
You can earn 2 points
First the price (amount) and than the message of points below the price.
I found that this is coming from the plugin so I can't change it or updates will be compromised.
If I can get it done only by css?
Could somebody help me with this? Thanks a lot!
Here is a pretty hacky way you can do it with css only:
.single_variation .price{
display: inline-block;
width: 180px;
}
.single_variation .wc-pts-rwd-product-message{
float: right;
}
.single_variation .amount{
float: left;
}
Tweak the 180px value depending on your font size. css is not too well suited to this task and it would be better to change the HTML flow if you can.
To do this in WordPress you'd need to find the template where this is outputted and overwrite it in your theme. This way your change won't be overwritten when the plugin updates. Below are some methods to get you started modifiying WordPress plugins without changing core code:
Hooks and filters - http://blog.teamtreehouse.com/hooks-wordpress-actions-filters-examples
Overwriting templates - https://docs.woothemes.com/document/template-structure/
Modifying theme with a child theme - https://codex.wordpress.org/Child_Themes
A method of modifying css is to install the Jetpack plugin and activate their css module. Then in the WordPress admin area under Appearance->Edit CSS you'll be able to add your own css declarations that can overwrite original css.
You can try like this -
<div class="single_variation">
<strong class="amount">$100</strong>
<span class="wc-pts-rwd-product-message">You can earn<span class="price"> 1 </span> points</span>
</div>
I am using rich snippets on my site, I have all of the code for them in the footer so that they are centrally located and easy to access. I do not want the text around these snippets rendered on the page because that info is elsewhere on the site. Is it ok to hide this text by using style="display:none" or will Google ignore the rich snippet entirely because the fields are hidden?
<!-- start rich snippet code -->
<div itemscope itemtype="http://schema.org/LocalBusiness">
<span itemprop="name" style="display:none">My Business Name</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress" style="display:none">123 Example Street, Suite 456</span>
<span itemprop="addressLocality" style="display:none">Major City</span>
<span itemprop="addressRegion" style="display:none">NY</span>
<span itemprop="postalCode" style="display:none">12345</span>
<span itemprop="addressCountry" style="display:none">US</span>
</div>
<span itemprop="telephone" style="display:none">(123) 456-7890</span>
<a itemprop="URL" style="display:none">http://www.mycompanysite.com/</a>
</div>
<!-- end rich snippet code -->
Any info would be much appreciated! Thanks in advance!
As #Diodeus said, ideally you'd have these rich snippets on the actual info that is shown to the user elsewhere on the site. Duplicating it is usually unnecessary.
Yes, Google may well ignore this content based on the display:nones. Can I ask why you're setting it on each element rather than just once on the highest level div?
A way around the display:none potential SEO issue would be to hide it in a different way. For example give the parent div a class of .visuallyhidden and add this to your stylesheet:
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
I would like to mention that Google tries heavily (using combination of algorithmic and manual things) to find websites which illegitimately use hidden text.
The typical penalty for that would be a removal from index for 30 days. However, you should not be concerned if you use hidden fields legitimate ways.
There is a very nice article Eric Enge Interviews Google's Matt Cutts regarding Google attitude toward illegitimately use of hidden text.
Have a look at this: https://sites.google.com/site/webmasterhelpforum/en/faq-rich-snippets and search for the word 'tempting'.
' It can be tempting to add all the content relevant for a rich snippet
in one place on the page, mark it up, and then hide the entire block
of text using CSS or other techniques. Don't do this! Mark up the
content where it already exists. Except in special circumstances ... '
It might seem like a clever idea to hide elements in a more complex way than by just display:none but, and i guess the same can be applied for hidden honeypot form fields, you are not the only one who can think of that.
Note: It is as easy to determine if a field is hidden by display:none as it is by margin:0; padding:0; width:1px; height:1px; overflow:hidden or by position:absolute; top:-[a value bigger than the page height]px or by something similar.
People would rich-snippet everything as an Apple product page if it would be ok to hide the snippet and provide any other kind of information on the porn - i mean page.
You got all that information already hanging out on the site, so just add the correct microdata tags to the corresponding text passages and google (other search engines, too by the way) will be happy.
So, for example, if your main page title already exists, put the itemprop="description" tag in the <div> tag thats is wrapping the title and you should be fine.
:)
I created a new web application in visual web developer. I saw that the title of "Site.Master" (in code) is:
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
So I opened "Site.css" and added:
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
color:Blue;
}
Showing "Default.aspx", though, doesn't show the text ("My ASP.NET Application
") in blue. Why?
EDIT: From the source code:
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
So I added color: Blue; in the css under body, page, header, title, and h1. I rebuilt, and pressed Ctrl + F5. Doesn't help. I'm trying this in IE and Firefox.
The stylesheet is probably cached on the browser. Clear your browser cache, and you should see the change.
Also, You probably did this for emphasis, but you don't need to surround the css in asterisks.
You can prevent this from occurring in the future by appending a query string to the css link:
<link rel="stylesheet" type="text/css" href='site.css?v=<%= DateTime.Now.Ticks %>' />
Something like this will cause the browser to download the css file every time the page is requested.
Update your css like below.
.title h1
{
font-size: 1.6em !important;
padding-bottom: 0px !important;
margin-bottom: 0px !important;
color:Blue !important;
}
from: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
Specificity is calculated by counting various components of your css
and expressing them in a form (a,b,c,d). This will be clearer with an
example, but first the components.
Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)
So, the class of div is over-riding the element setting of h1.
Try
color: blue;
instead of
**color:Blue;**
Two things:
It's possible you just need to do a "hard refresh" of the page. Try pressing Ctrl + F5 and see if that helps.
You may need a more specific selector to control that element if another CSS rule is affecting it. Try changing "h1" to ".title h1"
i dont know why it happens but u need to clean firefox cache and cookie then it works.
This cases are common and almost no solution to this issue (sadly, little can be done) if and only if your web page content was sourced from a template online. To confirm this, create two web forms with different templates and both web forms share the same 'sitemaster' page. it kind of inherits content design.
I'm building a web site and I'm using HTML5. I'd insert into my header an img that is my company's logo. In terms of efficient and correctness it is better set up css propriety as background-image: url("logo.gif") in my css style or including in the html file
<header>
<img src="logo.gif" alt="logo" />
</header>
It is best to include the image as an img tag, not a background-image.
This means that if the client has disabled CSS on their browser, or it doesn't support CSS, they will still be able to see the logo at the top of the page.
This would also mean you could make the logo a link to the home page, which has become a general usability point for websites these days:
<header>
<img src="logo.gif" alt="logo" />
</header>
For more information on this sort of situation, see this popular StackOverflow post:
When to use IMG vs. CSS background-image?
that depends.
If your logo should be clickable then include it in the HMTL. (usebility)
If it is only present for design purposes go with the CSS.
It is generally a better idea to define everything related to the appearance of the Website in the CSS.
html:
<header>
<div id="company_logo"></div>
</header>
css:
#company_logo{
width:50px;
height:50px;
background-image:url();
}
Unless you need to have some contents over your logo, I'd go for the <img> tag (it is also screen reader-friendly provided you have the "alt" text).
Background images can not be printed, if your site has the purpose of being printed, then your logo won't display.
Remember that a logo is a content, and a background is a style. Using a background as a logo is not semantic.