Is it possible to , in Drupal 6 using Views, to specify that an image should be shown only if it belongs to the page? I want to make a header image that's different for every page, so each page should show only the image that belongs to it, and none of the image that belong to other page. Or can I do this without Views? I've used ImageField to add the field for the image, but I want it to display in the header, not the content with the node stuff.
Maybe I misunderstand, but I wouldn't use Views for this. Am I correct that what you want is to display a given image in the header of a given page ? I can see two options :
1) If you page basically display one node, and If you add the image using an imagefield, then you could use CSS to move it out of the content and into the header (using absolute positioning).
Something like :
div.field-field-<your field name> {
position: absolute;
top: 50px; /* Adjust to fit your theme */
left: 0px; /* Adjust to fit your theme */
}
You should make sure you've left enough space for the image at the location you want it. This CSS should go in your theme.
2) You could use a block for each of the images, set the block to display only on the page you want. Go to /admin/build/block/add to create a new block. Add the image under 'block body' - this will depend on your setup, but the general idea is to select an input format that allows images (That is the HTML img tag) and enter the HTML to point to that image, eg. <img src='/path/to/your/image' width='50px' height='50px' />
Then under 'Page specific visbility settings' select 'show on only the listed pages' and enter the path of the page you want this image on.
Save the block, then go to /admin/build/block/list and drag the newly created block in the section you want it to show (eg. header).
Option 2. means you don't have to know CSS/Drupal Themeing, and that the way the page is formated is independant of the node content (which you may or may not want). The downside is that you may end up with a lot of blocks which will make things a bit unwidly. A cleaner way to achieve the same way is to use the context module : http://drupal.org/project/context
There are yet other ways to achieve what you want (Drupal is very flexible), but I hope these are good starting points !
Related
I have created 6 pages for the website and added into my header, Now need to move last two pages to the right side of the header in my website. Please help me how to do that. Thank you
Do you use some menu inside of the header?
If you, just you have to take id values for that specific items who contains the links to those page and edit directly in the section Add CSS styles from your WP editor, and put something like this:
#btn_Id_*,
#btn_Id_* {
float: right !important;
}
I hope this one help you.
I have a screenshot below which I have to replicate in Wordpress. I am using Wordpress Divi theme.
1st Image:
2nd Image:
Problem Statement:
I am wondering which option I should select in the New Module section of wordpress (2nd Image) so that I am successfully able to align images in a single line (1st image).
Obviously, you have to choose the Image module to insert an image. Insert each image in a separate Image module.
But before that, make sure you have inserted a row and all of these modules are inserted into that particular row.
Two primary options come to mind:
You can create a single image as a composite of the 7 images (logos) you show in your first example image. A potential disadvantage of this is the sizing and spacing will be fixed. Although, that could also be to your advantage, since the whole composite image can resize somewhat responsively, it might work just fine.
If you want to have 2 or more images in a Column stacked horizontally (as opposed to the default vertical stacking), you can add the following Custom CSS to the page (go to Page settings in Divi Builder; then the Advanced tab, then Custom CSS) on the Row into which you've put the images (seven of them, in your example).
.imageStack .et_pb_image {
display: inline-block;
vertical-align: top;
}
Shown here:
On the Row in which you want the images to stack horizontally, go to Advanced tab, then the CSS ID / Classes, and put in the class imageStack.
Shown here:
As for your second image ... it sounds like you didn't know you need to use the Image module. In your case, with method #2 above, you'll be using 7 image modules. The trick is then getting them to not stack vertically. Using method #2 above will achieve that.
We are working on customising a website for our client in Squarespace (so that they can manage it on their own).
I've added a CSS style to the background of a layer of text, but it won't show up. I have imported the image to use into Squarespace and I have the URL.
I have also inspected the page element and found the id that I'm wanting to target to.
This is my code:
#yui_3_17_2_5_1465050472193_17704 {
background-image: url("http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/5752e43c22482e7d77f53e3b/1465050172750/Share+the+Love+Kids+Club.png")
}
Why does this not add the image I expect?
In Squarespace, currently, any ID starting with "yui" can/will change on page refresh. That is because such IDs are dynamically generated. Therefore, you should not rely on them for use in CSS or Javascript.
However, it is currently accepted that block IDs (ID's starting with "block-" do not change as long as the block is not removed or moved in a way that causes it to be removed (such as dragging a text block directly above/below another text block).
Therefore, you should instead locate the block ID of the block to which you want the CSS rule applied. If you need to target with even greater specificity, start with the block ID then add specificity from there. For example:
#block-yui_3_17_2_4_1443109442267_11866 {
background-image: url("http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/5752e43c22482e7d77f53e3b/1465050172750/Share+the+Love+Kids+Club.png")
}
If this still doesn't give you enough to get the problem solved, consider adding a link to the page in question, and stating which block/area on the page you want to target.
Additional Information/References:
https://answers.squarespace.com/questions/59297/how-do-i-discover-a-block-id.html
https://answers.squarespace.com/questions/10450/which-ids-should-i-target-for-my-css.html
How do I completely remove the sidebar from MediaWiki, and I mean in the sense that the content div occupies 100% of the width of the browser space? I've successfully implemented an extension where non-registered users do not have a sidebar or toolbox to begin with and hence the extra space now seems rather superfluous in such cases.
I'm trying to create my own skin from Vector and have tried so far to change the margin-left: 10em and corresponding tags in div#content and mw-panel in the skin's css file but no luck so far.
Why use CSS when you can edit the sidebar menu and have this stored in the database
Navigate to MediaWiki:Sidebar edit the page and remove the components you don't need
If you want to use CSS then you can try,
#sidebar{
display:none;
}
to see if it gives you the desired effect.
Or you can do what dreamweiver said and use JQuery
$('#side-bar').remove()
If, as you are writing, you are creating your own skin, then you simply do not have to print the sidebar! It is there because you have a piece of code in your skin printing it.
Search your skin code for $this->data['sidebar'], and you will find the loop that prints the sidebar.
However, I'm guessing that you skin has some kind of navigation,and rather than reinventing the wheel, I would recommend using the sidebar, with it's built-in functionality (possible to set from MediaWiki:Sidebar, etc), even if you chose to use it in another fashion. it doesn't have to be printed as a sidebar,just because that's the name -- it could be a top menu, a dropdown, ...
a quick introduction :
facebook has changed the LIKE (count) button
into something like :
LIKE (count)
[ -------------------- clic = open a Big zone bottom / right --------------------]
problem :
Its nice BUT ....
you forgot that a lot of website are using the like button in "toolbars". Page example
Header
Left column Tooblbar, include fb:like -------------------- Right column
Document content
Footer
and lot of structured pages/ blocs are using "overflow:hidden" !! So it makes the displayed widget randomly truncated everywhere (right, bottom...) depending of its environnement.
Its impossible to remove all the overflow:hidden from the containers blocks, to satisfy a widget update.
What can we do. Some sites where clean, now they look drafts, with all button opening truncated stuff...
any solution ?
If you want to use the Facebook plugin, the only solution seems to be to change the HTML/CSS so overflow:hidden can be removed. Alternatively, you could try to use a service that forwards the user actions to social networks for you and offers different methods of website integration.
If you're not using overflow: hidden for semantic reasons, you could always change it to overflow: visible or just remove it. I'm assuming that the fix isn't that simple...
A quickfix that wouldn't require you to modify your CSS would be to place your FB Like button outside of any containing elements that have overflow: hidden or overflow: auto and use absolute positioning to get it where you want it.