I want to change the way Tumblr default theme shows the pages links (just under the Title and Description.
Some time ago it just showed all the links and if they didn't fit on one line, they just went to the next line.
Currently there is only one line of links that needs to be scrolled horizontaly using click n drag (or sliding with the finger in smartphones).
I want to change it as before so all the links can be shown without needing to scroll.
I am having to guess here as you have not provided any code or an example, but if you want to show post tags stacked on top of one another (like a list).
Then change this code:
.inline-meta .meta-item {
display:inline-block;
...
}
to this:
.inline-meta .meta-item {
display:block;
...
}
Or write your own style tags as this css is inherited I believe.
So at the bottom of your style tag just add the property display:block to the .inline-meta .meta-item element.
Related
I do not know if this is easy or standard. I would like to be able to put a tag around a paragraph so that the paragraph is invisible in the main page of a tumblr account, but visible in the post.
A little bit similar conceptually to the [READ MORE] idea, except it just takes out a single paragraph.
My objective (in case there is a better way out there), is to have navigation at the top of the post (above the first paragraph), but for that navigation not to show in the main page where all the posts are listed.
From reading on the web (eg here), it seems that {block:PermalinkPage} can be used to hide text everywhere except the page. So I would either need to create a structure (e.g. or something) inside the html background that takes advantage of this (I don't know if this is possible), or do something similar with code in the actual post.
I'm not sure if I fully understand your question. If you want to create a text post with a paragraph hidden on the index page of your theme, then this should help:
Add this inside of the CSS of your theme code:
{block:IndexPage}
.hiddentext {display:none;}
{/block:IndexPage}
Create or edit the text post in HTML mode, and style the text you want to hide liked this:
<p>This is text that you will see!</p>
<p class="hiddentext">This text will only be visible on the permalink page!</p>
The text will display normally on the dashboard and on the permalink page of your blog, but will be invisible on the index page of your blog.
If you don't know where to add the css, go into your them HTML and search for </style> and place the code directly above that.
If you are wanting this navigation to show up on all post pages, and not show on the main page, you should put the navigation in your html and wrap it in {block:PermalinkPage} and {/block:PermalinkPage}. If you do not want this to show up on ask pages, and pages you create yourself (only post pages), instead wrap the html in {block:Date} and {/block:Date}.
You would put this somewhere after {block:Post} and before {/block:Post}, but without seeing your code, I can't be more precise.
My site is [manayunkfarm.org] (sorry, can't post more than 1 link), My issue is that if I add more than 4 pages to my menu navigation, the navigation "hamburger" icon slides into white space on all pages with a shorter header image. (Click around the site and use the drop down navigation and you should get an idea of what I'm talking about.
I've mocked up what I'd like for it to look like,
mockup of possible new navigation
I figure it should be fairly easy to adjust the with of each navigation box in half, then create 4 more boxes, doubling the number of pages I can link to, in the same amount of space. Does anyone know where I would have to go in my wordpress editor to edit this and how?
Thanks
Well, for starters, opening effect and the stacking of the menu items are being handled by some jquery/javascript somewhere.
What you can do is use String Locator to locate which part of the code is responsible for changing the css of the #nav element. Then, change the code according to your preference. But, if you are not used to scripting then this will be tough.
The way out, which is my suggestion is that, change the color of the menu button.
Change it from white to the pink color being used for the menu link hover : #DBBFBE
If you want to go ahead with thi suggestion then:
Go to Appearance -> Editor. Generally, the editor should open style.css which is the default stylesheet of your theme.
Search for : #nav-toggle
Change the color attribute to #DBBFBE from whatever it is, I think its #ffffff;
Thanks.
Working with Bootstrap I wanted to make a replica of http://spring.io/projects; a grid of links that are each a bordered panel (might not be the right word...) with some words an a picture inside. I've come to a conclusion, that Bootstrap's Thumbnail component should be right for me.
Having tried to use it, however, I ran into a problem.
If I want the entire panel to be clickable, I have to apply the thumbnail class to an anchor tag (wrapping the anchor into a div with thumbnail doesn't seem to work). Then, inside the anchor tag I've got a div tag with the class caption in it to store some text whose styling I don't want to change upon hovering on the panel.
What this caused is this: the text regained normal colour (as compared to the link colour when used without the caption class, however hovering over the panel causes the text to get underlined, and I'd prefer if that was not the case: it doesn't look very good and the highlight of the border upon hover is already a good indicator of that it is indeed a link.
I was about to just get my css hat out and modify the caption class to not do this, but it doesn't seem like the right course of action; I can't imagine it being desirable behavior for captions to get highlighted like this, and I'd like to use as little custom code as possible (since sticking to standards means I won't have to maintain this code every time I update bootstrap).
So my question is: where am I going wrong? Is it actually bad practice to want the entire thumbnail panel to work as a link? Or should I go ahead and manually scrape the underlining off? Or am I maybe applying wrong classes to wrong tags? Or is the thumbnail component not a right component for me to use altogether in such a case?
EDIT:
Forgot to include the code.
The thing I'm currently using:
<a class="thumbnail text-center" href="#">
<div class="caption">
<h3>Potato</h3>
<p>Some short description of what this exact potato really is about.</p>
</div>
</a>
EDIT 2:
Adding an image of what is currently occurring:
This is with the mouse hovering over it; as you can see, the text is underlined, which is not ideal.
Really weird that you ask this question because I just read a thread on this not so long ago and still have my solution which I have turned into a FIDDLE for you.
If I understand your question correctly, you want the entire panel / div to be a link, which can be accomplished like this: (This is the OP's steps, cant remember them word for word)
Make your Div position: Relative;
create a link
put span tags into that link <span></span>
Style the empty span tag with
CSS:
{
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
/* edit: added z-index */
z-index: 1;
/* edit: fixes overlap error in IE7/8,
make sure you have an empty gif */
background-image: url('empty.gif');
}
I think that's all there is to it. Like I said... There is a thread somewhere on this, but I cant remember what it was called.
Hope this can help.
EDIT: So after a long debate, we can forget about the above AND we came to the conclusion that this is possibly what you are after? :)
Add a tiny bit more CSS to your solution and you are sorted...
a.thumbnail:link {
text-decoration:none;
cursor:pointer;
}
Here is an updated fiddle
The solution is to add on the top of your style sheet:
a:hover {
text-decoration: none;
}
I am developing a Google Chrome extension.
Extension shows a dialog box (jquery ui, as a div) inside any webpage, in the dialog box user can add some content [HTML content without body, without styles info].
The problem i am facing is, that the styles specified in the webpage are getting applied to the jquery dialog and the content user is adding.
For ex. when i launch my plugin on stackoverflow webpage, all text become center aligned, etc etc.
What is the best way to get rid of parent styles inside a div?
you should look into the reset stylesheets almost every CSS framework comes with. You can take that reset stylesheet and apply all of the reset styles to your specific DIV:
div.YourDiv, div.YourDiv * {
margin:0;
padding:0;
border:0;
...
}
which should reset both YourDiv and all elements below. After that, you can get started w/ styling the sub elements as you see fit.
I've done that using an IFRAME, which basically creates a whole new html document inside a box, without the styles from the "parent" page. The other option is to redefine all the styles in your div, but that's very tedious and ugly.
My company is starting to move toward adding the iPad as a browser i have to test my work on. This got me thinking...
Since touch-based clients don't have a :hover state are pure CSS dropdowns going to go away?
Then i thought even if you add some javascript to make the menus popup on click... What happens when the menu item (that expands to another menu) is also a link. How do you tell the difference between a click to see the menu or a click to go to that link?
What's going to happen with dropdown menus when touch based clients become more ubiquitous? Are there any workarounds out there yet?
Pure CSS dropdowns are possible on touch devices thanks to the :target pseudo-class. Basically, the pseudo-class is active for objects that have an id matching the current URL fragment. This means that the URI fragment can be used to store and share state with CSS. For example, let's say we're on http://example.com/, which has the following HTML and CSS:
<style>
#menu {
display: none;
}
#menu:target {
display: block;
}
</style>
Show the Menu!
<div id="menu"> ... </div>
The menu is hidden by default. Clicking or tapping the link will change the URL fragment to "menu" (full URI: http://example.com/#menu). Because now there is an element with an id equal to the URI fragment ("menu"), the :target pseudo-class applies, and the display property is changed.
Further reading:
Usage and Example at Mozilla Developers Network
Implementation of a touch-friendly pure CSS dropdown
This is kind of a design issue forced by a technical issue. I'd probably redesign/reorganize my content into one of three ways:
1- Click-activated mega-menus (example). The downfall here is that you might have real estate issues.
2- Top-Level Category links that lead to Navigation Pages. The downfall here is that it requires an extra page load to get to the content.
3- Make each Menu Item consist of two buttons, one to navigate to the page (the text) and one to expand the child menu (an arrow.) You'd still need, though, to provide the child navigation, if present, on the page the user goes to when they click a menu item.
my nav bar has this functionality (collins.class401.com/nav) for the crap you need
its a modified version of TJK_DropDownMenu http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp
their version (and mine) uses visibility for :hover
their version also only supports having <a>'s as menu items, while mine also supports <span>s (though using spans breaks their keyboard navigation) if you want something like a form, or a button in your menu, like i have
their version usually works for :hover on ipod touch, as long as you click in the 'white space'
my version is much more friendly to touch devices, and has the clickable arrows to toggle the display using prototype.js,
or, if they can't hover, and javascript is off, setting a php session and reloading the page, then inserting a style to the style tag at the end of the page which will overwrite the visibility and display according to whether the clicked to show or hide