I'm developing a new website on TYPO3 6.2 using the Bootstrap Package.
I want to add a custom css class to menu links via backend and print the CSS classes in my template. So if I go on the Typo3 backend:
Page > Any page Properties > Appearance or Behavior Tab > Custom CSS class (I would like to have a field that I can type the classes)
So I could type my CSS class there like "span3 orange" for Page 2 and "span4 green" for Page 3, empty for Page 1. And in my HTML I want to print that css classes like this in the menu:
<ul>
<li> Page 1 </li>
<li> Page 2 </li>
<li> Page 3 </li>
</ul>
How can I do that?
Note 1: This is a huge website with thousands of pages, so I would be able to add classes for each page.
Note 2: Note that the menu right now is being generated via TypoScript and being called in my Fluid Template.
You could also explain how to print that css classes on the body tag or on any other part of the page:
<body class="span3 orange">
You could use the page field "frontend-layout" unless you don't use it for other purposes. A custom field would require an own mini-extension.
The you write a fluid condition for the css class, whenever the other frontend layout is selected.
Location for the condition ist the template partial redering the menu.
http://wiki.typo3.org/Fluid#f:if.2C_f:then.2C_f:else
Related
I was creating a ghost blog and i created a custom component to display all the tags in the blog.
I used the below code to do so,
{{#get "tags" limit="all"}}
<ul class="tags">
{{#foreach tags}}
<li>
{{name}}
</li>
{{/foreach}}
</ul>
{{/get}}
I made the component to act as a filter. But I am facing some issues,
Tags with no posts are not displaying.
Also is there any way to know which tag filter is currently active?
can someone help me with what I am doing wrong.?
Thanks in advance.
I believe tags with no posts technically don't exist so they don't they don't create empty page routes, as all tags have their own tag page (/tag/example-tag/). As for knowing the active class I assume you're wanting to apply an active class to the tag link, which can be done with link_class:
<a class="tag {{link_class for=url class='tag-current'}}" href="{{url}}">{{name}}</a>
I want to be able to let the user add a styled button in the content editor in silverstripe. They need to be able to edit the text inside the button and also need to be able to link it to another page or website. I believe you can do this using shortcodes or possibly having a button on the tiny_mce editor would be better?
HTML:
<a href="http://www.need-to-be-editable.com">
<div class="ribbon">
<strong class="ribbon-content"><h1>Need to be editable</h1></strong>
</div>
</a>
JSFIDDLE - HTML & CSS for button
For a start that HTML isn't semantic - you've got inline elements around block elements, and unless this button is going to kick off a new section you shouldn't be using an H1 tag.
Ideally you can simplify your link markup to something like this:
<a href="http://www.need-to-be-editable.com" class="ribbon">
Editable text
</a>
Then you can easily apply the 'ribbon' class to the link in the editor, and the link can reside in a P, H1, H2 or whatever is appropriate for the context. Check out this module for some tips on taming the editor if you choose this approach.
If you need the markup to be more complex and include multiple elements then a shortcode is probably a better option. Shortcodable is a handy module for improving the editing experience for shortcodes in the CMS.
I'm building a simple static website with Foundation.
I'm wondering how I can code the menu navigation of site without repeating the menu code on each html page (so it is easier to maintain in the future)? I could do a Javascript include with the menu but I wouldn't be able to change the navigation class appearance for each menu item (ex.: highlight "About Us").
Or is there a tool out there that would help to maintain a large menu items on a pure static web site?
I actually just tried to figure this out recently, although I ended up using PHP. If you want to use PHP, here is the following snippet I used:
Create a function
<?php
function echoActiveClassIfRequestMatches($requestUri) {
$current_file_name = basename($_SERVER['REQUEST_URI'], ".php");
if ($current_file_name == $requestUri)
echo 'class="active"';
}
?>
Then, add these to your <li> tags:
<li <?php echoActiveClassIfRequestMatches("about-us")?>>
About Us</li>
Hope this helps. I'll try to give credit if I can find the link where I found this solution.
i create block with views module for Print Promoted to front page, this worked and i see result in my front page. this views worked with field and i print title, thumbs, content. now i need to custom this theme views for show in jquery content slider.
i click in advanced->theme->information i see this:
field content revision: views-view-field.tpl.php, views-view-field--title.tpl.php, views-view-field--frontpage.tpl.php, views-view-field--frontpage--title.tpl.php, views-view-field--block.tpl.php, views-view-field--block--title.tpl.php, views-view-field--frontpage--block.tpl.php, views-view-field--frontpage--block--title.tpl.php, views-view-field--block-1.tpl.php, views-view-field--block-1--title.tpl.php, views-view-field--frontpage--block-1.tpl.php, views-view-field--frontpage--block-1--title.tpl.php
But i don't find any .tpl.php theme files for edit theme design using html and css. how to create custom design theme for print my result with this format:
<div id="content">
<ul>
<li>
<div class="title">title1</div>
<div class="thumbs"><img 1 ......></div>
<div class="content">content1</div>
</li>
<li>
<div class="title">title2</div>
<div class="thumbs"><img 2 ......></div>
<div class="content">content2</div>
</li>
</ul>
</div>
I think the Views 2 theming guide has already explained everything clearly. Just follow the steps there and it only takes just minutes.
I use my custom block for displaying a flash game at the front page of my Drupal 7 installation, but there is also the annoying message:
<div id="first-time"><p>No front page content has been created yet.</p>
<div class="item-list"><ul><li class="first last">
Add new content</li>
</ul></div></div>
below it and I can't remove it. Is there please a hook for adding custom CSS? In my module I would like to make the #first-time light grey or invisible.
I prefer not to add a blank content just to get rid of that text.
Thank you!
Alex
UPDATE:
I've added the following to my module:
function game_init() {
drupal_set_message('XXX init called XXX');
if (drupal_is_front_page()) {
drupal_add_css('#first-time {color: green;}', 'inline');
}
}
but don't see that CSS-code or XXX string inside my front page.
UPDATE2:
Oh, I had to clear the cache and now it works (the Drupal docs seem to be wrong here - there was written that 'inline' CSS is not cached...)
Hiding the CSS is the WRONG way of doing it. why did you created your content as a Custom Block?
you should create a "Page" and set this page as front page in the Configuration->Site Information.
Whatever. you can also use any of these options but is not recommended.
you can also also add a BlankPage by Adding only the Title(then hiding it in PHP on page.tpl.php)
you can add your css in /templates/themes/bartik.info
you can call drupal_add_css on the _init() hook of your custom module.
Blocks are used to display information in every page(although we can set to display only on certain pages). Say For Example. A Menu, or A Shopping Cart etc.
If you want to add some CSS for a module, you should use drupal_add_css()
Why not simply add this CSS to your theme?