Tag: html

The “More” block link – make it look professional with css

I use a lot of views to display content. In the pager section of your view you have an option to include a “more” link. I like the concept but i really want more flexibility

Image

in styling and such. So, what ended up creating is a “more” link using a little custom HTML and some CSS. First, I used the Header section of the View to add the link with simple HTML. But I also added a class selector on the link (for the images and placement). I also added a <span> tag on the text that will be displayed for the link itself. This allows me to style the text of the link separately.

Image

Then, i created some CSS for the new class more-button-added. they are as shown:

.more-button-added {
background: url(“/sites/images/buttons/more-btn-blk.png”) no-repeat;
position: relative;
float: right;
margin: -34px -19px;
}
.more-button-added:hover {
position: relative;
background: url(“/sites/images/buttons/more-btn-ylw.png”) no-repeat;
float: right;
margin: -34px -19px;
text-decoration: none;

these allow the image to be inserted and moved to the appropriate spot right along with the text for the link. Now, I don’t want a More text link in addition to the image, so, i use the selector i created in <span> called .more-link-clear to style this way:

.more-link-clear {
color:transparent;
text-decoration:none;
}
.more-link-clear:hover{
opacity:0;
}

now, the link is there, it is directly behind my image and it can’t be seen! and since it is a class and not an ID, I can use it for many of the other “more” buttons that I will place. I ended up using this technique on five different Panels panes on the front page of my site and they work really well. all of the panes are views, so i simply have to change the HTML link target to make it custom for that view. the css remains the same. very nice!

Customizing your theme

Once again, I have a book recommendation for you. And this one may be the best of any that I have picked up. Ric Shreves’ Drupal 7 Themes. This one is great. But I do have to warn you that it isn’t for novices. I started reading this one several months ago and decided that I needed to brush up on some PHP, CSS and HTML stuff, AND learn more Drupal before I could really make use of it. But if yLearn drupalou are at that point, where the idea of adding a content type for a specific need is understood, where the files that go into a theme are reasonably well understood, then this one will be for you. This is the book that I am really going to be able to make use of going forward in my theming.

 

Panel Pages, Views and Variants – UX

I feel like such a slacker because I didn’t post anything at all yesterday. But I have my two kids with me this weekend, and being a divorced dad doesn’t allow for much inattention when you do have them! And we’ve had fun. But, now, back to work.

I am working with the functional layout of the pages. This is where the storyboarding techniques come in handy. Writing out what will happen, how the user will react to it, what they expect and what you ARE ABLE to deliver. Drupal can do a lot. It can do about anything if you have all the skillsets needed. But, if you are working with the system in a drag and drop, plug n play sorta way, you will need to be creative in how to meet the needs of your customer.

So, i have all the diagrams about how the user will see what is available. and i have created most of the functional elements by combining core features (aggregator items, blogs and forums, etc) with Views. Views is the key.

Then, i take the View and create an interface based off of Panels. Now this will get most of the functions and workflows in the proper place. But it will look really bare boned. So after I get the main parts of the functionality in place I will begin to style everything with CSS. Then, it will be more or less complete. Once I get the core functions in place, I’ll put the name of the site out there for anyone who cares see how it fits together. There are sure to be other elements of theming in place at that point as well.

One of the things worth mentioning in using variants to supply different users with different content from the same page. and this is where variants come into play.

Adding CSS to a specific element in a subtheme

Using the Omega started theme, i decided to change the font size of an element on my main page. if you don’t quite follow everything here, go back and read the last two posts. they pertain to this.

  • Use Google Chrome
  • Right click the element, in my case a block title
  • Choose Inspect element. The chrome dev tools will launch at the bottom.
  •  Look at the HTML part of the element. In this case it is h2.block-title – <h2>blah.com</h2>
  • Look over at the right hand side. You will see the CSS files that apply to the element. the one at the top is the last one to apply. in this case it is not in the subtheme, but the parent theme, omega, itself. here it is:
media=”all”                                                                         omega-text.css:49      the 49 is the line number in the css
h2.block-title {
font-size: 18px;
margin: 0;}
  • put your mouse over the  omega-text.css:49 part and you can see the full path to the file. i didn’t expect this; i thought the css file for the block would be in the subtheme and not the parent. so, i want to change it. but i don’t do it in the parent, i do it in the subtheme css. 
  • omega’s subtheme has a default css called global.css. i add this to that file:
media=”all”
h2.block-title {
font-size: 78px;
margin: 0;}
  •  because of the way Drupal inheritance works, this MORE SPECIFIC file will over ride the same defined CSS element in a different file. 
  • I save, refresh and i see the change. Now the change isn’t perfect because all the block titles are now too big. But the tools now show that the “top” file is the global.css file and the h2.block-title reference in the omega-text.css file now has a strike through, meaning it is overridden somewhere.
  • so i’ll journey to the template file next to see how to give that one block a specific css definition.

Subtheming, CSS and template files

I’m finally at a point that i’ve wanted to be at for a long time. and, as usual for me, as soon as I ask for help with something, i figure it out.

on my sand/prod sites, i configured a “title” in a block. i then kind forgot that i had the title in the block and looked at its appearance as the result of the site information. then, using the tools that i described i changed the css. and, although i expected only the one element to be changed, i found that all the block titles were changed. but, that’s by design and is just the result of my ignorance of the way Drupal works. But now I know better. I am going to post what i did in a new post. i think it might really be beneficial.

Theming, CSS and aesthetic decisions

Today I’m going to begin working (again) with the CSS stuff in my sandbox. My environments are all consistent right now (I spent some time over the weekend making sure enabled/installed modules are mirrored and patch levels are the same). It’s amazing how quickly your environments can cease to mirror each other if you’re aren’t meticulous about it.

My prod site is in an OK shape. But there is a lot of work to be done.

  • AT Subtheme 7.x-3.1 (default theme) – my current prod theme

I have changed my sandbox over to the Omega theme. Did a little tweaking and enabled it on Prod. It’s time to get back into working with the CSS stuff. Omega has a good rep as a responsive theme, meaning it uses media queries to determine screen width. This is how the theme knows whether you are on a mobile device or not.

Getting all the environments ready.

So, I have all three environments up and running. I have the prod site out of DC hosted by blackmesh.com, the best drupal hosting company there is. The quality site, which mimics the prod site perfectly past the virtualization level, from the drupal core level, the OS and patch installs and even the modules and themes installed on drupal. file structure. user accounts. access methods (although prod uses sftp and qual uses ftp) and os components like apache and mysql. very nice.

i had to reenable clean urls on the q and d boxes. which was OK. i used most of the proc that i uploaded earlier today with a few differences that are not in the instructions. but google and drupal.org were very helpful and I really didn’t have much trouble. just be aware that linux permissions seem to be trickier than perms on a windows server.

getting late, and write more tomorrow. but i am excited because i am finally going to be able to get to work on the site itself and not have to worry so much about all the infrastructure crap. i did  get a few issues with file transfer worked out too. but i have a question: is there any other way to use drupals install module gui to use a protocol other than ftp? that’s the only choice in the drop down. i can ssh files to the server and i’m sure that i could install/enable the modules via the command line, but from the web admin gui running remotely, i don’t see how you could. i’ll pcik that back up more tomorrow maybe.

Drupal CSS, TPL Files and More

Drupal 7, CSS, TPL, PHP

This colorful little exercise actually attempts to show where the Core and Module CSS and TPL files are located. The thing is, Core really mean Core and Core Module. Together, these are refered to as Core. Module refers to contributed modules and their corresponding files that may or may not supersede the core files. Then, there are the Theme files. These can trump all the rest of the files’ styles if the naming conventions are followed properly. This too-busy diagram also attempts to help me see how I deal with many colors, shapes and layering. I’m not a design guy and I don’t really care for design, nor am I any good at it. But, I have to learn some of it.

Inheritance rev7 – Copy – this is the actual Visio diagram. rename it to .vsd and you can see this up close.

Drupal 7 Core .TPL.PHP files

http://drupal.org/node/190815

this link will take you to a list of all the template files used in the core. this is a great link that has been very useful to me. each template is fully linked to an explanation of the template itself.

these are the files that I am particularly concerned with:

System“modules/system/…”