Add class to anchor tag
Permalink
Hi. Is it possible to add a class to an anchor tag with a custom template for the content block?
Say:
1. The user adds the content block to the main area.
2. The content is only a link to another c5 page.
3. Then the user adds a custom template to this block and with the custom template an additional class is added to this link.
So that a button or something can be generatet from jquery or whatever.
<a href="#" class="default_content_block_class my_additional_class">Buy</a>
Say:
1. The user adds the content block to the main area.
2. The content is only a link to another c5 page.
3. Then the user adds a custom template to this block and with the custom template an additional class is added to this link.
So that a button or something can be generatet from jquery or whatever.
If this is solely to let your user select another page in their site and link it, a custom block would probably be the direction I would go. I could throw this together for you if you are interested.
Since I want to learn creating blocks that would be very cool having a starting point!
well yes, you could do it that way and it would require you to do some string replacing before outputting the content in your custom template where you would add a class etc.
easiest though would be to place a css class rule in your typography.css file under your theme root. that class will then appear under "Styles" in the rich text editor (tinymce). you can then apply that style by selecting any content in the editor and choosing that style.
.my_custom_class {}
in /themes/your_theme/typography.css
then look for the style to appear in the dropdown called Styles in the editor. if the style dropdown isn't there you may have to change from basic editor to another kind.
easiest though would be to place a css class rule in your typography.css file under your theme root. that class will then appear under "Styles" in the rich text editor (tinymce). you can then apply that style by selecting any content in the editor and choosing that style.
.my_custom_class {}
in /themes/your_theme/typography.css
then look for the style to appear in the dropdown called Styles in the editor. if the style dropdown isn't there you may have to change from basic editor to another kind.
Interesting. This was new for me. I'll see what enlil throws together, too. This solution is easy going but a block solution is the concrete5 way to do it, right?
I thought about string replacing but before I wanted to ask about other possibilities...
I thought about string replacing but before I wanted to ask about other possibilities...
Attached is a page link block in it's simplest form, made using Designer Content add-on. unzip it and place the folder in your root/blocks folder. Then visit Dashboard > Block Types and install it for use.
EDIT: If you choose NOT to use the block, do NOT remove it from your file structure until AFTER you have visited Dashboard > Block Types and uninstalled it from there!!!
EDIT: If you choose NOT to use the block, do NOT remove it from your file structure until AFTER you have visited Dashboard > Block Types and uninstalled it from there!!!
While I appreciate enlil's efforts, I must say that a block is not the way I would go for such a simple styling request. I would take the pure CSS route that cherrycake is recommending. You can't build a whole new block every time you need to style something. That's what CSS is for! Also, the on-screen placement of blocks is too rigid and inflexible.
exactly. what i've noticed though unfortunately is that editors usually find it complicated to use the styles dropdown plus tinymce is still a bit messy when it comes to such things and there's always a risk your link will all of a sudden be encapsulated in a <span class="mystyle"></span> etc.
i haven't tried out the new editor for the next version of c5 though and i'm curious how these things will be handled there.
i haven't tried out the new editor for the next version of c5 though and i'm curious how these things will be handled there.
depends on the usage. if it is like enlil is saying that the purpose is really for the user to easily add a page link on a single row anywhere on the page it might be the way to go but usually editors would expect such thing to work "inline" as well, such as including such a link in the middle of a paragraph or inside a content block that contains related info. if so, a block wouldn't cut it.
the typography way is pretty much the "concrete-way" but isn't always that intuitive. there's also the option for a link to have a class name in the tinymce editor (there's a textbox that lets you enter a class name manually in the dialog).
the typography way is pretty much the "concrete-way" but isn't always that intuitive. there's also the option for a link to have a class name in the tinymce editor (there's a textbox that lets you enter a class name manually in the dialog).
It's to early to ask for concrete 5.7? Since TinyMCE is no longer part of concrete will that work in v. 5.7?
As far as I know, tinyMCE will still work on 5.7. but the default editor will be Redactor. I'm also pretty sure that Redactor will incorporate a very similar feature (but I have no inside information)
I found my solution, thanks. I really appriciate your opinions.
With TinyMCE (and for concrete 5.7 with redactor) you can access the HTML source code of the content you are editing. So for a quick adding of the desired classes I can do it that way.
When I need a more user friendly solution for a customer I created a custom template for the content block with string replacing and that works, too.
I often use frontend frameworks like bootstrap or foundation. Because of that all my styles are in _one_ css file I don't want to have them elsewhere.
With TinyMCE (and for concrete 5.7 with redactor) you can access the HTML source code of the content you are editing. So for a quick adding of the desired classes I can do it that way.
When I need a more user friendly solution for a customer I created a custom template for the content block with string replacing and that works, too.
I often use frontend frameworks like bootstrap or foundation. Because of that all my styles are in _one_ css file I don't want to have them elsewhere.
the thing to consider with the "one css file" though is that the content editor won't have those styles available. so when you enter text such as headers, paragraphs etc in the content editor, they will appear differently than what is rendered on the page (since the page applies the custom styles from your css file).
this is the reason concrete made it so you can use a separate file for all your text styles called typography.css in your theme root. that way, your text styles will be displayed the same in both the content editor and the page output.
it's also nice to sometimes keep your general text styles separate from layout and design styles since text styles are more likely to be changed all at once where as layout and design styles might be changed more randomly. the whole typography approach is a popular way of making this easier.
this is the reason concrete made it so you can use a separate file for all your text styles called typography.css in your theme root. that way, your text styles will be displayed the same in both the content editor and the page output.
it's also nice to sometimes keep your general text styles separate from layout and design styles since text styles are more likely to be changed all at once where as layout and design styles might be changed more randomly. the whole typography approach is a popular way of making this easier.
