Hello! I am new to Drupal, so I am currently using one of the per-existing themes. I added a css file for 3D buttons to my /var/www/drupal/themes/seven/button.css. I am now in the process of drafting a content page with my locations. I would like to make a button for each location and I am unsure how to target the css file I just included in the Seven theme. I do not want to create my own theme yet, because I want to get all the content ready before I spend time on making the theme! I want to make sure I can do what I want to do before I spend countless hours in perfecting my theme. So I was just wondering what I am supposed to do to get the css for my buttons that I created.
I tried the following:
<!doctype html>
<html>
<head>
<link rel=stylesheet href="button.css" type="text/css" media=screen />
</head>
<body>
<link href='http://fonts.googleapis.com/css?family=Alef:700' rel='button' type='text/css'>
<a href="javascript:void(0);">test</a>
</body>
</html>
Nothing works. :/ I guess I am unsure what the direct path is for the css since I am super new.
EDITED
I would like to note when I copy the HTML and CSS together in the Content page it does work... so my code is correct. I am just missing how to target my css and what HTML I need to change.
Thanks!
~Abs
Comments
In theme there will be already some css files
you can write css code there or you have to write this in theme info file
stylesheets[all][] = button.css
put button.css in root theme directory and clear the drupal cache.
hello :)
hello :)
that worked! however, now my theme looks out of whack! the buttons are like everywhere... such as the admin drop down menu. I just want to specify text to appear on some buttons... so is there a way to do that?
https://imageshack.com/scaled/large/62/v9m.png <- picture
Some buttons if you had firebug then
look for specific id or class or every page has specific body class. That could use for page specific.
okie dokie
So I just want to make sure I am doing this right. I created my own css file purely for the 3D button. This 3D button will only be used for when I want to make certain text a button, basically. :) So anyways, in the .info file, I just want to make sure I have the correct stylesheet classification:
What stylesheet should I used? I already attempted all and that was what jacked everything up! So should I use screen or print?
this is what my css looks like:
how would I call the css in the HTML section of the content page?
that is the mystery.
thanks for all your help!
~Abs
Leave the other theme css there
and add new line
When button.css will be included css will automatically come on html section content and any time you change info file clear cache. Any problem ask, its good to talking to you. Thanks
Are you asking how to
Are you asking how to actually put your classes and id's into your content? That is done when you are creating content. There are numerous options on where and what depending on how you created the content.
You can also just use Firebug to see the html output as-is, and change your selector to match in your css. Otherwise, you add the class/id in the html that you paste into a custom content pane or you add it in the numerous 'add css class' fields.
there are 11 CSS files in the
there are 11 CSS files in the theme bartik:
okay, so I made the change
Now, I am just a bit confuse on how I am supposed to code the HTML. Now that the button has been added to the .info... I am just stuck.
I tried the following code in the full HTML editor for the Content Page: Basic Page
But it does not seem to work... all I get is the standard link text.
this is a snippet of the code
Not sure if it would be classified as class, id?
Eek!
~Abs
you know you're missing the
you know you're missing the "." in your css, right? Since you've used class="button", it's not the element type of button.... put a . in your css
so would it be like.button
so would it be like
How would I lay it down in the HTML? I am at home now and do not have access to the computer because I shut it down for the night.. so I cannot try to alter the
.
tonight. Tomorrow morning, I would love to get this working first thing because I am super excited about Drupal and the flexibility you can do!have a great night.
~Abs
Okay, I made the modification
Okay, I made the modification and it still will not display. :(
I am trying this code:
ID's are to only be used once
ID's are to only be used once on a page, classes can be reused over and over.
So try:
<a href='http://fonts.googleapis.com/css?family=Alef:700' rel='button' class="button">test</a>
and in your css you would use:
Note that you can put a class on the actual a element. That keeps it inline. Using a p (paragraph) tag can work of course but it will be a block element meaning it will insert a hard break before and after itself so there's more styling needed.
In css, ID's are represented with #.
Since you're just starting out, it would be better to just stick with classes. ID's are powerful selectors and really, better used as hooks for Jquery/Javascript which you'll probably get into soon!
Anyway, use class="button" and in the css file itself, use .button{}