I'm using Joomla 3.4 and Bootstrap in it. I have basic layout which contain main content on the left side and right sidebar on the right. Main content is 75% width of the container (col-sm-9) and right sidebar is 25% (col-sm-3). This is fine for all pages except one that main content should be only 66.66% (col-sm-8) width of container and right sidebar 33.33% (col-sm-4). How can I do that? I don't want to duplicate or use other templates.
Thanks
on approach is, on specific page
1)with jQuery you can chage class from col-sm-9 to col-sm-8
or
2)you can overide css rule .col-sm-9 & col-sm-3 & set width to 66% or whatever.
e.g your specific page is index.php?option=com_mycom&view=myview then inside components/mycom/views/myview/tmpl/default.php you will be adding
#content
{
width:66.66%;
}
#aside
{
width:33.30%;
}
where #content is id of main content & #aside is id of right column
Related
I am editing a site in wordpress acting on custom css. I would need to have a black background on the main page where all the products are displayed and keep the white background inside the product sheet.
currently I have entered this code:
.site-container {
position:relative;
background:black;
}
this code worked in the main product grid, now the background is black, the problem is that it also changed the background of the single product page. how do i exclude the command to make it stay only on the product grid?
or alternatively which code should I enter to make the product sheet background white?
(the site I'm working on is not online yet)
thank you
Just add the background property to the page ID class for the page you want to change the background.
So for example your page ID is 6:
.page-id-6 {
background:black;
}
This css is only applied to the page with the ID 6.
You can find the id with the dev tools of your browser, just have a look at the classes of the HTML Body.
Currently, my title overlays my cover image on my pages and posts. I do not like this and want it either hidden or removed. I've tried plugins and they don't work. What code can I use to do this? I have a child theme.
My Site with example of this: https://intentionaldetours.com/example-laos-article/
Plugins that didn't work and messed up my menu. I just want this text deleted on the display, I need it to show up in other areas of the site
Don't have any
Titles either not displaying at all on pages, and for post below the featured image
Do you want remove the text "Example Laos Article 2 months ago"? Is it?
If so, you can add some CSS code to hide it.
Something like:
.entry-header {
display: none;
}
I have a pretty simple horizontal menu that has a solid background with colored links. How do I change the color of the link when I'm at the targeted page?
I tried this #nice-menu-1 li a:active
but that only affects the color for a moment when I click on it. I want the color on that item of the menu to stay changed while I am on that page.
thanks
Elements are "active in the definition of the :active pseudo class when that element is being clicked or tapped. So what you describe above is expected behavior.
You'll need to:
Set a class on the link that corresponds to the current page
Target that class with CSS
Luckily, Nice Menus and Drupal handle #1 for you by adding an .active class to the <a> tag and an .active-trail class to the parent <li> tag.
So you can target those in CSS like this:
#nice-menu-1 li.active-trail a,
#nice-menu-1 li a.active { color: #0f0;}
I'm curious what is the right way to have the content (e.g. div) occupy 100% of t:panelTab inside of t:panelTabbedPane. It appears that the content gets rendered within div or span for which there's no way to specify style. The only way I was able to do that was using absolute layout. Is there a better way?
Did you try providing a custom CSS class using the tabContentStyleClass attribute for <t:panelTabbedPane>? Suppose you call it ownStyleClass, the pane gets rendered like
<tr class="myFaces_panelTabbedPane_contentRow">
<td class="myFaces_panelTabbedPane_pane ownStyleClass" colspan="8">
which should allow for any custom layout.
I have encountered an issue when using Orchard that I am sure there should be a fairly simple fix / solution for, but I have yet to find it.
I am trying to establish a specific width content area for my home page (580px), and a larger width for content pages (800px).
Layout.cshtml Snippet:
<div id='content'>
#Zone(Model.Content)
</div>
Style:
#Content
{
[...]
width: 580px;
}
Currently - the Content div wraps all of my content regardless of the page (either Home Page or Content). I am wondering if it is possible to use a different div to wrap the content based on the Page, as shown:
Layout.cshtml Idea:
#if(Model.Page != "Home")
{
<div id='fullcontent'>
#Zone(Model.Content)
</div>
}
else
{
<div id='content'>
#Zone(Model.Content)
</div>
}
I'm unsure if the above suggested method is possible (or I am unsure how to check for the current Page) - but any other suggestions would be appreciated.
You can use the Designer Tools module (built-in all recent Orchard versions) and enable the URL alternates feature. You'll then be able to create a layout-url-homepage.cshtml alternate for your layout.
You can use the Layout Selector Module to assign a custom layout to any content item.
http://gallery.orchardproject.net/List/Modules/Orchard.Module.Orchard.DesignerTools
You could use the Vandelay.Classy module to add custom tags to the page that represents your homepage, although it does add a lot of fields to the Page content editor.