Change preset blocks

Posted by kpalaniuk on June 16, 2009 at 3:48pm

Hi Everyone!

I am a newbie in web design, new to Acquia Slate and am very excited to have found this group. Hoping to manipulate some blocks such as the login block. I would like to place it on header-top but throw it on the right-hand side and without the Open-ID option. Basically, I want it to look much like it does on the showcased site Cornerstone Gospel Church.

However, I am also interested in how to change other blocks and other "preset" pages as well. If I am not using the correct terminology, I will give another example I would like to change:

I have made custom fields to my "/public_html/profiles" page where users enter specific information. When I link to view all users in that page I have no idea where the page file that pulls those fields is located. For instance, I would like to rearrange them and put

tags between users and so forth. Also, how would I go about changing any other conditional pages? Is this PHP? CSS file? Maybe it is beyond me. I have picked pretty much all this up so far, but not sure where it gets too complicated for me.

Any help is so greatly appreciated! TIA!

Comments

Change to style.css

Posted by wretched sinner... on July 6, 2009 at 11:12am

wretched sinner - saved by grace's picture

Hi kpalaniuk,

To get the login block on the right, I had to replace the existing code for the User Login block in style.css with the following (from approx line 953):

/* HEADER - USER LOGIN */
/* horizontal style login block*/
#header-top .block-wrapper {
  margin: 0;
}

#header-top #block-user-0 {
  padding-top: 10px;
  float: right;
}

#header-top #block-user-0 h2.title {
  display: none;
}

#header-top #block-user-0 #edit-name-wrapper,
#header-top #block-user-0 #edit-pass-wrapper,
#header-top #block-user-0 #user-login-form span.button-wrapper{
  float: left;
  margin: 5px 10px 0 0;
}

#header-top #block-user-0 #user-login-form label {
  color: #eee;
  font-weight: bold;
  margin-left: 2px;
  position: static;
}

html.js #header-top #block-user-0 #user-login-form label {
  font-size: 85%;
  font-weight: normal;
  margin-left: 5px;
  position: absolute;
}

#header-top #block-user-0 #user-login-form input.form-text {
  border: 1px solid #ccc;
  color: #eee;
  padding: 1px;
  width: 115px;
}

#header-top #block-user-0 #user-login-form span.button-wrapper{
  font-size: 80%;
  margin-top: 20px;
}

html.js #header-top #block-user-0 #user-login-form span.button-wrapper,
html.js #header-top #block-user-0 .item-list {
  margin-top: 0;
}

#header-top #block-user-0 .item-list {
  clear: both;
  font-size: 80%;
  line-height: 60%;
}

#header-top #block-user-0 .item-list li {
  font-size: 90%;
  display: inline;
  padding-left: 22px;
  padding-right: 20px;
}

#header-top #block-user-0 .item-list li a,
#header-top #block-user-0 .item-list li a:link,
#header-top #block-user-0 .item-list li a:visited {
 color: #DFB77C; 
}

/* OpenID */
html.js #header-top #block-user-0 #user-login-form li.openid-processed, 
html.js #header-top #block-user-0 #user-login li.openid-processed {
  margin-top: 0;
}

#header-top #block-user-0 #edit-openid-identifier-wrapper {
  float: left;
  margin: 5px 10px 0 0;
  padding-top: 0;
}

#header-top #block-user-0 .item-list li.user-link {
  padding-left: 0;
}

#header-top #block-user-0 #user-login-form input#edit-openid-identifier.form-text {
  padding-left: 20px;
}

#header-top #block-user-0 #edit-openid-identifier-wrapper .description {
  font-size: 75%;
}

Note: This is modifying the core code of the theme. You will need to make this change every time you upgrade the theme, and take into account any changes that may get made to this section each time.

I've attached the patch file which should apply to the current (v1.4) version of Acquia Slate, and allow you to right align the block easily.

The other option is to put the above code in your local.css file, and delete the relevant part of the style.css file each time you upgrade. This has the advantage that you don't lose your modifications if you accidently overwrite the style.css file.

Soli Deo Gloria

Jerome
cgc.org.au

Block placement & Theme Developer

Posted by jrdixey on July 6, 2009 at 8:07pm

Hi Kyle,

You might want to download the Developer module (http://drupal.org/project/devel). If you're using Drupal 6, the Theme Developer feature of this module can be turned on in order to see which part of the code is responsible for generating different blocks in your page layout. Read all the docs for Devel when you start using it so that you understand exactly what it's doing. It's really handy.

Cheers
Jennifer

Comments

Change to style.css

Block placement & Theme Developer

TNT Themes

Group organizers

Group categories

Type of post

New groups

Group notifications

Hot content this week