Editing the border around the thumbnails and title positioning

Permalink Browser Info Environment
I was hoping you could tell me if there are ways of editing the colour/thickness of the thumbnail borders.

Additionally if there is a way of having the image titles appear above the thumbnails instead of underneath.

thank you for you time

C

Type: Pre-Sale
Status: Resolved
CraigMcMullen
View Replies:
mnakalay replied on at Permalink Reply
mnakalay
Hello,
You first need to create a templates to make sure you don't modify the add-on's original files.

To create a template, go to your root "blocks" directory. In it create a folder named "touch_gallery" then in this folder create a folder called "templates" then inside templates create a folder called anything you want but following this convention:
1-no capital letters
2- all spaces replaced with underscores (_)
3- only letters and numbers.

so for example call it "blue_border"

Then you need to copy certain files from touch gallery inside this last folder.

Go to packages\touch_gallery\blocks\touch_gallery and copy "view.php" as well as the 2 folders "css" and "images" then paste them in the template folder you created.

Once you have your template, you need to actually apply it to see the changes you will perform. Put your page in edit mode, click on the block and select "templates". From the list select your template and save.

For the modifications, in the newly copied css folder open touchStyles.css to make modifications.

Towards the beginning of the file look for
.touchgallery-thumbs a{
   display:inline-block;
   border:7px solid #303030;
   box-shadow:0 1px 3px rgba(0,0,0,0.5);
   border-radius:4px;
   position:relative;
   text-decoration:none;
   background-position:center center;
   background-repeat: no-repeat;
}


the line
border:7px solid #303030;

is responsible for the border thickness and color. After that you will need to look for
.touchgallery-thumbs a:after{
   background-color: #303030;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    display: inline-block;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;      
    text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
     -webkit-text-overflow: ellipsis;
   content: attr(title);
    padding: 2px 5px;
    position: relative;

and modify the line
background-color: #303030;

to match the color you set previously.

To make the thumbnail caption go above thumbnails instead of below, with the same block of code you need to add the line
bottom: 45px!important;

45px is a value that should work ok but you need to experiment here to get what you want.
The "!important" declaration is needed here so please don't forget it.
CraigMcMullen replied on at Permalink Reply
CraigMcMullen
Thank you for your response. It worked a treat.

A client has asked me if there is also a way to remove the rounding of the corners on the thumbnails?

Thanks

C
mnakalay replied on at Permalink Reply
mnakalay
you can do that by deleting the line:
border-radius:4px;

From the " .touchgallery-thumbs a" declarations
CraigMcMullen replied on at Permalink Reply
CraigMcMullen
thanks again.

C
CraigMcMullen replied on at Permalink Reply
CraigMcMullen
Hello Again.

Is the a way to have each row of thumbnails align to the right or left instead of from the center?

Thanks in Advance

Craig
mnakalay replied on at Permalink Reply
mnakalay
Yes, look somewhere at the top of the css file for a line that says
text-align: center;

and replace center by left or right as you prefer
CraigMcMullen replied on at Permalink Reply
CraigMcMullen
Worked a treat.

Thanks

concrete5 Environment Information

# concrete5 Version
5.6.0.2

# concrete5 Packages
Awkward Slider (1.0.4), Gallery (1.8.1), Minima (1.5), tnSpacer (1.3), Touch Gallery (1.5), Whale Nivo Image Slider (1.2).

# concrete5 Overrides
css/style.css

# Server Software
Microsoft-IIS/7.5

# Server API
cgi-fcgi

# PHP Version
5.4.32

# PHP Extensions
bcmath, calendar, cgi-fcgi, Core, ctype, curl, date, dom, ereg, filter, ftp, gd, gettext, hash, iconv, imap, ionCube Loader, json, libxml, mbstring, mcrypt, mhash, mysql, mysqli, mysqlnd, odbc, openssl, pcre, PDO, pdo_mysql, pdo_sqlite, pdo_sqlsrv, Phar, Reflection, session, SimpleXML, sockets, SPL, sqlite3, sqlsrv, standard, tokenizer, wddx, xml, xmlreader, xmlwriter, xsl, zip, zlib.

# PHP Settings
max_execution_time - 60
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 1000
memory_limit - 128M
post_max_size - 8M
sql.safe_mode - Off
upload_max_filesize - 10M
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
odbc.max_links - Unlimited
odbc.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pdo_sqlsrv.client_buffer_max_kb_size - 10240
session.cache_limiter - nocache
session.gc_maxlifetime - 7200

Browser User-Agent String

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.