What would be the most effectient way to hide a background image if the url has node in it it?
I have set a background image that runs through the site however I dont want the background image to show if the url has node in it. For example,
http://example.com/node
http://example.com/node/add.
The site uses drupal and my css is entry level to be polite!
Thanks
I know in pure CSS there isn't a way to do what you are trying. However, I am pretty sure that Drupal would find a way to prove me wrong. :-)
The best way to do this would be to create a new stylesheet or style for the pages that have node in the URL and override the default background. You can do that by using the following code:
background-image: none;
But remember that this should be called after the common stylesheet that is on all the pages otherwise you will see the background image on the node pages as well.
Related
I use shortcode to embed an HTML world map on one of my web pages. Right below the world map is a third party link for which I want to set the display value to "none", however since I have no CSS skills or web dev background I am having difficulty writing the custom CSS for this. I've played around with containers and specific page ID's, but no luck. The page is www.sheerheroine.com/map. Can anyone steer me in the right direction on how to write the code please? When I inspect the page I can see which container the link is in, however when I use this container the entire map is removed. Thanks!
The !important declaration makes the display CSS impossible to override. The following javascript would remove the element you wish to not display -- document.getElementsByClassName('fm-map-container')[0].childNodes[3].remove();. Try it in the developer's console. For it to work on the page, you would need to delay the execution until the element exists though. As others suggest, it would seemingly violate the terms of use of the lovely vector map you are using free of charge. For a proof-of-concept, however, you may find this code enlightening.
As the entire map con-taint is coming because of thirdparty image, better check with the that third party style code.
Or
in alternatively, just check the the height of the total map area.
lets assume here total height of map image is 10px from bottom.
and lets assume the height of that area(to which area,you don't want to show user) is 2 px from bottom.
Then create a div element, where you will put the entire map image, but follow the below stlye, where we can hide some portion of image to user
<div style="max-width: (10 - 2)px"> here .. put your map image url..</div>
For my website we use custom style sheets that are stored locally on our server and are injected into the webpages. However when i add them to CKEditor and then attempt to resize or move an image with the enhanced image plugin they cannot be resized or moved at all. Has anyone encountered this problem before? Is there anyway around it?
edit: So i add my css files using
config.contentsCss = ['http://fonts.googleapis.com/css?family=Droid+Sans',
'http://fonts.googleapis.com/css?family=Bree+Serif',
'http://fonts.googleapis.com/css?family=Droid+Sans+Mono',
'http://192.168.0.50/css/new/all.css?v=1" media="all',
'http://192.168.0.50/css/new/templates.css?v=1',
'http://192.168.0.50/css/pre_review/colors.css?v=1',
'http://192.168.0.50/css/pre_review/paged_test.css?v=2',
'http://192.168.0.50/css/pre_review/bootstrap.min.css?v=1',
'http://192.168.0.50/css/pre_review/main.css?v=1',
'text/css'];
I have also installed the Enhanced Image plugin to allow me to resize and move images around. however when i insert an image on to the page the source looks like
<p><img alt="" height="239" src="http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png" width="239" /></p>
when i originally set the image width and height in the popup panel i set the values to 2 and 2, these values do nothing to edit the actual size of the image. It still displays at the full size of 239x 239.
I know that it is my added styles that are causing this error as it works fine without them, However i do need them. is there anyway around this without having to remove the styles?
First of all, your contentsCss has some weird parts like the last item or this 'http://192.168.0.50/css/new/all.css?v=1" media="all'. Please verify that all this works. Incorrect rules may affect CKEditor.
Second, the issue may be very simple - your CSS most likely affect widgets styling. Disable loading your CSS files one by one and see which one breaks the Enhanced Image plugin. Then find the rule that breaks it and then improve the rule so it does not affect images.
I've found some info on how to create a repeating background header image in general, but I am trying to do this within a drupal 6 block. Basically I have a banner image and I want to extend the edges so that they repeat all the way across the screen.
I don't have access to any of the server files so I can't work with the css there. Is it possible to just create a class within the body of the block? I know it's not the best practice- but is it possible? I'm working on this with someone who has been swamped in other higher priority work so I'm getting desperate.
Yes, you can put any css in <style> tags within the body of the document (and specifically in this case in the body of a block).
This is not best practice but you already know that.
Based on my research and the many posts on this subject, I understand that I cannot alter the CSS in the iframe based on the domain tree security policy. However, I am sure (or hope) there has to be a developer out there that has implemented a way to run the iframe locally on their domain and therefor gain access to alter the CSS attributes.
All I need to do is change the calendar grid (array) background and border colors. Please do not tell me you can change the bg-color in the tool, because all that does is change the header. The border is blue and the bg-color of the grid is defaulted to white.
Any direction would be much appreciated.
Look at this:
http://www.webdesignerdepot.com/2012/04/integrating-google-calendar-with-your-website/
It is described there how to change google calendar css.
I am a newby to design and looking now into the use of background instead of foreground images, which is a common practice.
I look at the techniques used, and see that:
you usually need to explicitly state the dimensions of the image (and set the foreground element to these dimensions)
you need to make the foreground element to somehow disappear with css tricks.
All this looks really hackish. So, I wonder, why on earth do all this instead of just using the native element? I am sure there is a good answer
(I did go through this When to use IMG vs. CSS background-image? , and could not figure out a clear answer)
One thing to consider as a benefit to using CSS for images is that you can load all your design images (images for UI elements, etc) with one http request rather than an http request for each individual image using a sprite. One large image that contains a grid of all your images.
As its been stated before, content images should use the img tag which also helps for people using various accessibility options when visiting your site/app. For example, if they are using a screenreader, the screenreader knows its an image and can read the img alt name or title, but if its just a div with a background image they get nothing.
The main difference is that in the img tag the image is hardcoded.
With CSS you can create different designs, switch between them, redesign the page, without altering the source code. To see the power of CSS, check http://www.csszengarden.com/, all the pages use the same HTML source, but with different CSS layout.
As #Shmiddty noted, if img is for embedded images (actual content, for example a gallery, or a picture for an article), and CSS is for design.
Also, the question you referred to, has nice list of all the use-cases: When to use CSS background-image.
The goal is to separate content from presentation. HTML should contain just content, and all presentation should be moved to the CSS. Once you achieve that, you gain a few useful side effects:
The CSS (presentational code) is cached by the user's browser, and each HTML file requested is smaller. This also has some SEO benefits (decreased code fluff).
Screen readers have to muddle through less when interpreting your page for visually impaired users. Making sure your HTML contains just content means visually impaired users reach what they're looking for much quicker.
CSS makes it possible to display the same content in different visual configurations, which is the cornerstone of the responsive web design movement. Properly delineating your content and presentation means being able to use the same HTML files across multiple platforms (desktop, tablet, smartphone).
However, there are times when images are content on a specific page. In those cases, you want to use an IMG tag, and moving the image to the CSS is actually a wrong move. A great discussion of when and where to use text to image replacement is at When to use IMG vs. CSS background-image? Basically, my personal litmus test is something like: Is this image going to be used multiple times on the site? If it is, it's probably part of the design. Once-off images are generally content.
If you're looking to move your design images to the CSS, congratulations :-p You've adopted a healthy amount of work, but started doing something worthwhile to the long-term health of your website as part of the web ecosystem. I would highly recommend looking into using the SASS/Compass system to manage your design images as sprites (see A List Apart:CSS Sprites and Spriting with Compass).
One of the main points of image replacement is to use your site title in a h1 tag for good SEO, and then hiding the text and replacing it with a custom logo.
This also makes your site more accessible. Say for example, your user has CSS disabled for whatever reason (screenreaders, maybe). They would still see the textual representation of your site title, whereas normal users would see the custom graphic.