I am using an OsCommerce web shop. I want to fade out a sidebar, but only on one specific subpage, but I don't know how. In WordPress you can do it with page ID it think. Is there any way to do this in OsCom or in general with for just one subpage?
Well, I don't know about oscommerce, WordPress and all that stuff (sorry), but I think that, if you know the url (I guess you know it, or you have some placement variable for get it) where you want to apply the fade, maybe you can:
Create a class for the fade transition/animation.
Add an ID to get the sidebar with js/jquery.
Add javascript/jquery code to your site for apply that css class ONLY in that page.
Something like this (with js & jquery):
<!-- language: lang-js -->
if (document.location.href =='http://this.is.my.url/my-subpage') {
$('#mySidebar').addClass('fade');
}
Pure js:
<!-- language: lang-js -->
if (document.location.href =='http://this.is.my.url/my-subpage') {
document.getElementByID('mySidebar').className = 'fade';
}
Here, the sidebar has id="mySidebar" and we set their class to class="fade" only in the subpage http://this.is.my.url/my-subpage.
Hope it help you.
Related
I'm trying to customize the framework.css for how high or low the sidebar appears on specific pages. Would it be possible to do this using a custom page template and a specific div class declaration? Such as creating a custom template and within that template creating a class to "override" the default css sidebar element settings for those pages? How would I go about doing this?
One option is to make sure the theme is using the function body_class() inside the <body> tag.
When I select the page template Sidebar Template (wp-content/themes/twenty-eleven/sidebar-page.php), the class page-template-sidebar-page-php shows up in the body tag:
According to brasofilo's answer, every page has its own class, in case of brasofilo's code, it is the page-id-674. It's generated by wordpress in general.
If you want to do styling on specific pages, you may use something like this:
body.page-id-674 div.specific-div-class {
/*code*/
}
Hope that helps!
I am using wordpress and on the page "sidebar.php" I have the following code:
<?php wp_list_pages('post_type=wiki&depth=1'); ?>
It works great but what I need to do it that what I click on a Menu item on the sidebar I need the sub items to display on the main page.
UPDATE:
What I basically need to do is to have the first level items on the left (As it currently is), and when those links are clicked then the sub items of those items will be listed on the index.php (main page).
I am using the wp-wiki plugin to display the pages as wiki pages but the actual but the list is the same, just showing as a different type:
post_type=wiki
Can anyone help please?
Thanks
<?php
wp_list_pages('sort_column=menu_order&title_li=&child_of='.$post->ID.'&depth=0');
?>
There's several ways you can accomplish this. WordPress actually has an example of exactly what you're looking to do in the Codex. (link - the last example in that section, right above the "List subpages even if on a subpage" heading)
There's several ways to do this though - that's just one example. But that code above, you just pop into your sidebar.php file. You can also create a widget out of it. And as someone else mentioned, you can use the new menu system for WordPress (but you can indeed, make it dynamic.) But the above example in the Codex is the simplest method.
Actually, an easier method would be just to list all subpages and use CSS to hide and show the child items based on what page you're on. The classes are already set up for you. Just view your source code and you can see it. So you'd do something like:
`li ul.children {display:none; }
li.current_page ul.children { display:block; }`
and variations thereof.
What about using the new menu function in wp 3?
That way you could include your type with any sub page you want (won't be dynamic though) and then add your favorite javascript or good css to show those sub-pages.
I would like to know whether there are any Drupal (6.x) modules and/or theming tutorials that can implement the effect of hiding and showing certain (clickable) elements of a view listing only when on mouse hover within the item's div (and not as a tool tip or popup). e.g. in http://rusoom.com/ the Author, Like, Info and Share links of each image (view item) only show on mouse over.
Another example will be the display of Favorite, Retweet and Reply displayed on each tweet on mouse-hover, when logged in to Twitter (http://twitter.com) and viewing any tweet stream.
Any help will be deeply appreciated.
Thanks in advance.
I would use the mouseover function in jQuery and create my custom JavaScript code (in a custom module or in the theme). Here is an example of the code:
file: sites/all/themes/MYTHEME/template.php
<?php
function MYTHEME_preprocess_page(&$variables) {
drupal_add_js(drupal_get_path('theme', 'MYTHEME') .'/mytheme.js', 'file');
}
?>
file: sites/all/themes/MYTHEME/mytheme.js
$('.box').mouseover(function() {
$('.hidden').show();
})
HTML (Views generated code)
<div class="box">Mouse over me to see hidden content</div>
<div class="hidden" style="display:none">This is hidden</div>
This is a quick mockup but it should get you in the right direction. If there isn't a module for this you can consider making one from this code!
Good luck
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?
I'm currently migrating my HTML website into a WordPress theme.
My current HTML website makes full use of jQuery's .load() function, by where I change the content of the page (via a DIV), using .load() based on my side menu options selected by the user.
For example:
HTML Code:
<div id="sidebar">
<ul id="themenu" class="sf-menu sf-vertical">
<li>Home</li>
<li>About Us</li>
</ul>
</div>
jQuery Code:
$("#themenu li a, #subcat li a").click(function(){
var toLoadCF = $(this).attr("href")+" #contentfooter";
$('#contentfooter').fadeIn("slow",loadContent);
function loadContent() {
$("#contentfooter").load(toLoadCF);
}
return false;
});
So using this as an HTML situation, the user clicks on the "About Us" menu option, which would basically in turn load the "about-us.html" file based on a href tag for About Us.
Now in the WordPress world, I have created a custom page template for About Us called "about-us.php" that is linked to a WP Admin dashboard page called "aboutus" (permalink), so my a href value is "url/aboutus/"
Based on this, how can I achieve the same result in WordPress to emulate my HTML coding using jQuery .load?
Please be aware that I have added all the necessary info in my header.php, index.php and sidebar.php files.
I'm just unsure how to reference the a href file, so that my about-us.php file is loaded using jQuery's .load().
I'm not too sure how to approach this from a WordPress perspective.
First off I'd go about making the site fully functional WITHOUT the javascript loading. This'll get your navigation and site layout proper before you get fancy and will also provide a fallback for crawlers and for when your JS breaks.
Next, make a subset of templates, or modify your existing templates, to react to a GET var in the URL to exclude everything but the main content area of the template. For the Ajax load you won't need things like the header, foot and sidebar.
Then I'd use jQuery to grab navigation links click events, modify the request URI to put a GET var in, and then make the request using .load().
A side benefit of this is when you turn on caching (yes, you want to run your site with caching, its wordpress, its far from "light") your Ajax requested pages will also be cached for tighter load times and less resource usage.
I assume since you've done it before that you know how to handle the jQuery action binding, request and response parsing.