Hi,
Can anyone tell me if there is anyway of styling hyperlinks which have been inserted via the WYSIWYG editor? Basically I would like to change the active and rollover colours in the link and remove the underline.
Thanks,
Richard
Hi Richard, no there is no way to style links in redactor.
On the other hand, styling of links is not the part of the editor, you better do that in your stylesheet
and work with different classes if you want.
Hi Oliver,
Thanks for that. I suppose the only downside of editing the style.css is that it gets wiped every time template folder is updated.
Richard
Okay, but why should the template folder be updated?
The templates you create are user data and not the Pulse core files, so when
an update of pulse arrives, nothing happens to your template.
Or you can create another stylesheet file, just to get sure.
Each time Pulse files are generated from the Blocs app both the content and template folders are generated.
I just tried adding to the style sheet but it had no effect on the hyperlink that was created in the Redactor editor:
a:link
, a:visited
, a:hover {
color:red;
text-decoration: none;
}
a:active {
color:blue;
text-decoration: underline;
}
What is the theme you are using and where do you change that?
The themes are generated by the Blocs App.
Ah I see, sorry but I can’t check that. I am not on a Mac.
I don’t know how Blocs work, does it exports the whole theme for you?
At the end there should be any code to edit.
The Blocs app just generates the Template and Content folders which then are used to overwrite and replace those in the original Pulse installation.
If you like, send me the template folder and I take a look.
From memory you can add your custom CSS (or whatever code) to Blocs by going to Page > Settings and pasting the styles in the add code section. As long as you wrap your CSS styles in a <style> block they should get picked up and used when the page is rendered by the browser.
@TimPlumb
Just tried that Tim but it still doesn’t get picked up. I can’t work out where pulse is getting its hyperlink styling from.
It could be that the styles are in there but Blocs is adding the default styles after yours. If you’ve a page online that we can look at then it should be easy enough to figure out what is going wrong.
@TimPlumb
Here’s the page with the hyperlink it’s under the heading “My Work” and is the last word in the end sentence “here” - it is in bold.
http://altography.co.uk/gallery
The link was applied in the Pulse WYSIWYG editor.
Hi Richard,
As I suspected the default styles for the page are taking precedence over the link styles you’ve manually added. There are several ways of fixing this but the easiest is to simply reset the style that the browser is currently using for this link.
Your CSS would then become;
.l-bloc p a:link,
.l-bloc p a:visited,
.l-bloc p a:hover {
color:red;
text-decoration: none;
}
.l-bloc p a:active {
color:blue;
text-decoration: underline;
}
I’m not sure if you wanted it like that but the link is being made bold by a set of <strong> tags wrapping the item. You can overwrite this styling using CSS but you may be better removing it in Blocs if you didn’t want it in bold.
Your best tool for tasks like this is always going to be the web inspector or Firebug in Firefox. Either will allow you to inspect the page and dig into what styles are being used and where they come from. You can then easily determine how to restyle the item with your own styles.
1 Like
@TimPlumb
Thanks for that Tim. That did the trick. I assume you meant it to placed in the Pulse “template” folder “style.css”.
I placed it under this section:
/* = Custom Styling
-------------------------------------------------------------- */
and everything seems to be working OK.
Thanks again,
Richard
2 Likes
@Oliver
Hi Oliver,
I got it working with Tim’s bit of css.
Thanks for your offer of help, it is much appreciated.
Richard
3 Likes
This topic was automatically closed after 21 hours. New replies are no longer allowed.