Stage 3: Moving thumbnails and text to the center

Makc666

Joined: 2003-12-26
Posts: 78

Posted: Mon, 2005-03-07 16:41

Stage 3: Moving thumbnails and text to the center

================================================

First of all you can make these changes only if you made changes from:
http://gallery.menalto.com/index.php?name=PNphpBB2&file=viewtopic&t=27090
http://gallery.menalto.com/index.php?name=PNphpBB2&file=viewtopic&t=27117

After all this changes thumbnails (screenshot #1) will look like on screenshot #3.
They will make it more pritty.

A lot of changes. And we will edit /layouts/matrix/!

================================================
Lets start.

Stage 1:
Go to "/layouts/matrix/templates/"
And make a copy of
/layouts/matrix/templates/albumBody.tpl
to
/layouts/matrix/templates/local/albumBody.tpl

Stage 2:

-----[ OPEN ]------------------------------------------------
/layouts/matrix/templates/local/albumBody.tpl

-----[ FIND ]------------------------------------------------
            <ul class="giInfo">
              <li>
                {capture name=originationTimestamp}

-----[ REPLACE WITH ]------------------------------------------ 
            <ul class="giInfoTitle">
              <li>
                {capture name=originationTimestamp}

================================================
Q: What we made?

A: By default there are TWO "giInfo" statements in albumBody.tpl
And when you change in CSS style some thing
for "giInfo" this change influence two times:
1. First time in the title of album. (screenshot #1 - RED pointer 1)
2. Second time under thumbnails. (screenshot #1 - RED pointer 2)

After this change we will have two independent blocks.
(screenshot #1 - BLUE pointer 3)
And now we can change each block separately!!
================================================

Attachment	Size
g2-stage-3-thumb-center-01-before.png	73.64 KB

Makc666

Joined: 2003-12-26
Posts: 78

Posted: Mon, 2005-03-07 16:45

Stage 3:
You make a copy of:
/templates/layout.css.php
to
/templates/local/layout.css.php
Yes you have to create dirrectory /templates/local/

-----[ OPEN ]------------------------------------------------
/templates/local/layout.css.php

-----[ FIND ]------------------------------------------------
.giInfo {
	display: block;
	margin: 0;
	padding: 8px 0;
}

.giInfo li {
    margin: 0;
    padding: 0;
    background-image: none;
}

-----[ REPLACE WITH ]------------------------------------------ 
.giInfoTitle {
	display: block;
	margin: 0;
	padding: 8px 0;
}

.giInfoTitle li {
    margin: 0;
    padding: 0;
    background-image: none;
}

.giInfo {
	display: block;
	margin: 0;
	padding: 8px 0;
}

.giInfo li {
    margin: 0;
    padding: 0;
    background-image: none;
}

Stage 4:

-----[ OPEN ]------------------------------------------------
/themes/veloria/styles/theme.css

-----[ FIND ]------------------------------------------------
.giInfo {
	text-align: left;
	display: block;
	font-size: 0.9em;
	color: #888;
	margin: 0;
	padding: 2px;
	list-style: none;
}

.giInfo li {
    margin: 0;
    padding: 0;
}

-----[ REPLACE WITH ]------------------------------------------ 
.giInfoTitle {
	text-align: left;
	display: block;
	font-size: 0.9em;
	color: #888;
	margin: 0;
	padding: 2px;
	list-style: none;
}

.giInfoTitle li {
    margin: 0;
    padding: 0;
}

.giInfo {
	text-align: left;
	display: block;
	font-size: 0.9em;
	color: #888;
	margin: 0;
	padding: 2px;
	list-style: none;
}

.giInfo li {
    margin: 0;
    padding: 0;
}

================================================
Q: What we made?

A: In Step 3 and Step 4 we created by one more block
for the changed value "giInfo" to "giInfoTitle"
in /layouts/matrix/templates/albumBody.tpl.local

In Step 3 we add a block to default CSS file.
And in Step 4 we add a block which we will change now.
================================================

Makc666

Joined: 2003-12-26
Posts: 78

Posted: Mon, 2005-03-07 16:45

Stage 5:

-----[ OPEN ]------------------------------------------------
/themes/veloria/styles/theme.css

-----[ FIND ]------------------------------------------------
.giInfo {
	text-align: left;
	display: block;
	font-size: 0.9em;
	color: #888;
	margin: 0;
	padding: 2px;
	list-style: none;
}

-----[ REPLACE WITH ]------------------------------------------ 
.giInfo {
	text-align: center;
	display: block;
	font-size: 0.9em;
	color: #888;
	margin: 0;
	padding: 2px;
	list-style: none;
}

================================================
Q: What we made?

A: We change "text-align: left;" to "text-align: center;"
Now text under thumbnails will be centered. (Screenshot #2 - Green pointer 1)
An text up to the right in the title will be set to "left" (Screenshot #2 - Blue pointer 2)
================================================

Makc666

Joined: 2003-12-26
Posts: 78

Posted: Mon, 2005-03-07 16:47

Stage 6:
Now we have to move thumbnails to the center.

-----[ OPEN ]------------------------------------------------
/themes/veloria/styles/theme.css

-----[ FIND ]------------------------------------------------
.giThumbImage, .giThumbMovie, .giThumbOther {
	border: 0;
	margin: 0 0 12px 0;
}

.giThumbImage img, .gsSingleImage img { 
	border: 8px solid #fff;
}

-----[ REPLACE WITH ]------------------------------------------ 
.giThumbImage, .giThumbMovie, .giThumbOther {
	border: 0;
	margin: 0 0 12px 0;
	text-align: center;
}

.giThumbImage img, .gsSingleImage img { 
	border: 8px solid #fff;
	text-align: center;
}

================================================
Q: What we made?

A: We add "text-align: center;" line.
Now all thumbnails is centered.
================================================

Stage 7:
Now we have to move thumbnails' titles to the center.

-----[ OPEN ]------------------------------------------------
/themes/veloria/styles/theme.css

-----[ FIND ]------------------------------------------------
.giTitle {
	color: #000;
	font-weight: bold;
	font-size: 1.3em; 
	margin: 0;
}

-----[ REPLACE WITH ]------------------------------------------ 
.giTitle {
	color: #000;
	font-weight: bold;
	font-size: 1.3em; 
	margin: 0;
	text-align: center;
}

================================================
Q: What we made?

A: We add "text-align: center;" line.
Now all thumbnails' titles are centered.

That it. We get it. Look as screenshot #3
================================================

Makc666

Joined: 2003-12-26
Posts: 78

Posted: Mon, 2005-03-07 16:49

Step 8 (BONUS ONE):
If you look at all screenshots, you will see that
Action Select Menu background color is yellow.
I think it is more pritty. Look above at Screenshot #3 - Blue pointer
Here is how I changed it.

-----[ OPEN ]------------------------------------------------
/themes/veloria/styles/theme.css

-----[ FIND ]------------------------------------------------
.giActionSelect {
	display: block;
	margin-top: 12px;
	font-size: 1.0em; 
	background: #eee;
}

-----[ REPLACE WITH ]------------------------------------------ 
.giActionSelect {
	display: block;
	margin-top: 12px;
	font-size: 1.0em; 
	background: #FFFF80;
}

================================================
Q: What we made?

A: We changed color "#eee" to "#FFFF80;"
You can your own.
================================================

That it. One more change.

Makc666

Joined: 2003-12-26
Posts: 78

Posted: Sat, 2005-03-12 12:08

Some more center steps:

-----[ OPEN ]------------------------------------------------ 
/themes/veloria/styles/theme.css 

-----[ FIND ]------------------------------------------------ 
#gsComments {
        clear: both;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding: 8px 14px;
}

-----[ REPLACE WITH ]------------------------------------------ 
#gsComments {
        clear: both;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding: 8px 14px;
        text-align: center;
}

-----[ FIND ]------------------------------------------------ 
.giDescription {
	display: block;
	font-size: 1.1em;
	margin: 0;
	padding: 2px;
}

-----[ REPLACE WITH ]------------------------------------------ 
.giDescription {
	display: block;
	font-size: 1.1em;
	margin: 0;
	padding: 2px;
	text-align: center;
}

-----[ FIND ]------------------------------------------------ 
.giInfo li {
    margin: 0;
    padding: 0;
}

-----[ REPLACE WITH ]------------------------------------------ 
.giInfo li {
	text-align: left;
    margin: 0;
    padding: 0;
}

================================================
Q: What we made?

A: We centered comments and summary information.
================================================

Stage 3: Moving thumbnails and text to the center

XUser login