Where is css template for appearence of photos???

Page 1 of 2 1 2 »
Forum moderator: bigblog

uCoz Community » For Webmasters » Design Customization » Where is css template for appearence of photos???

Soldierdevil

Posts: 154

Reputation: 1

Message # 1 | 4:05 PM 2016-10-22

The css template code provided in design customization does not affect appearance at all. Currently have deleted it all but photos seem to stay intact not affected at all. I want to adjust the width of photos to 100% at portrait view on phone. Please help. Secondly the file catalog is under spells. The templates are fine...but no entries are shown on the website and in the control panel it self. Atleast you would have said i tempered with the template bu the control panel shows 0 entries yest i have up to 1000 files. It was fine but started all today. Whats going on here????

Added (2016-10-22, 4:00 PM)
---------------------------------------------
An more so to speak...informers disappear often! They only show while one is not logged in. Ounce you you log on they all disappear, They come back later after a few minutes....and then disappear...and then reappear. They are playing hide and seek with me. Happens with all informers

Added (2016-10-22, 4:05 PM)
---------------------------------------------
My file catalog is all a mess. The entries them selves do not appear the way i have the template code. They seem to have their own code....and i have output 12 entries on category view but i see only three, yet i have more than 30 entries in some categories...what could be the problem????

Systems developer

Cyberdasm

Posts: 639

Reputation: 7

Message # 2 | 7:10 AM 2016-10-23

Soldierdevil,

Quote Soldierdevil (

)

An more so to speak...informers disappear often! They only show while one is not logged in. Ounce you you log on they all disappear, They come back later after a few minutes....and then disappear...and then reappear. They are playing hide and seek with me. Happens with all informers

Added (2016-10-22, 4:05 PM)
---------------------------------------------
My file catalog is all a mess. The entries them selves do not appear the way i have the template code. They seem to have their own code....and i have output 12 entries on category view but i see only three, yet i have more than 30 entries in some categories...what could be the problem????

Kindly clear your cache and cookies manually or pressing CTRL+F5 to fix your problem. (I prefer manual clearing)

1F4BF3B

Soldierdevil

Posts: 154

Reputation: 1

Message # 3 | 8:56 AM 2016-10-23

Cyberdasm, Thank you so much it worked. Now can you help and tell where i can find the CSS for appearance of photo entries?
Below is what is see and its classes are not seen anywhere in photo appearance page

Code

#dynPhoto {
    padding: 0 10px;
}
#photoModalWrap, #photoModalWrap td {
    font: 12px/1.5 'Arial';
    color: #5d5d5d;
}
#photoModalWrap a {
    color: #20a7fd;
}
#photoModalWrap a:hover {
    color: #027fcf;
}
#photoModalWrap hr {
    margin: 5px 0;
    border: 0;
    height: 2px;
    overflow: hidden;
    background: url(./../../img/photopage/hr.png) repeat-x;
}
#photoModalWrap .uphoto-entry {
    margin-bottom: 20px;
}
#photoModalWrap input[type=text], #photoModalWrap input[type=password], #photoModalWrap textarea {
    vertical-align: middle;
    height: 24px;
    margin: 3px 0;
    padding: 2px 5px;
    *padding: 0px;
    font-family: 'Tahoma', 'Arial';
    font-size: 13px;
    line-height: 18px;
    color: #000;
    background: #fff;
    border: 1px solid #dcdcdc;
    box-shadow: inset 0 1px 0 1px rgba(0, 0, 0, 0.03);
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#photoModalWrap input[type=text]:focus, #photoModalWrap input[type=password]:focus, #photoModalWrap textarea:focus {
    border-color: #9c9c9c;
}
#photoModalWrap textarea {
    padding: 3px 5px;
    height: auto;
    overflow: auto;
    resize: none;
}
#photoModalWrap .securityCode {height: auto !important;}
#photoModalWrap #message {
    width: 100%;
    height: 100px !important;
}
#photoModalWrap input[type=button], #photoModalWrap input[type=submit], #photoModalWrap input[type=reset], #photoModalWrap .button, #photoModalWrap select {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    min-width: 20px;
    padding: 0 10px;
    text-align: center;
    text-decoration: none !important;
    font: 13px/31px 'Verdana', 'Arial';
    height: 31px;
    color: #777 !important;
    text-shadow: 0 1px 0 #fffcf6;
    border: 1px solid #aaa;
    border-radius: 3px;
    background-color: #fff;
    background-image: -webkit-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
    background-image: -moz-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
    background-image: -o-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
    background-image: -ms-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
    background-image: linear-gradient(to top, rgba(85,85,85,.1), rgba(255,255,255,.1));
    box-shadow: inset 0 0 1px #fff;
    *display: inline; /*--FOR-IE--*/
    overflow: visible;
    zoom: 1; /*--FOR-IE--*/
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#photoModalWrap select {height: auto !important;}
#photoModalWrap ::-moz-focus-inner {
    border: 0;
    padding: 0;
}
#photoModalWrap input[type=button]:hover, #photoModalWrap input[type=submit]:hover, #photoModalWrap input[type=reset]:hover, #photoModalWrap .button:hover {background-color: #fafafa;}
#photoModalWrap input[type=button]:active, #photoModalWrap input[type=submit]:active, #photoModalWrap input[type=reset]:active, #photoModalWrap .button:active {background-color: #fafafa;box-shadow: inset 0 1px 2px rgba(0,0,0,.17);}
#photoModalWrap .codeButtons {
    min-width: 20px;
    margin: 2px 1px !important;
    padding: 1px 4px !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.4 !important;
}
#photoModalWrap .cBlock1, #photoModalWrap .cBlock2, #photoModalWrap .cBlock1 td, #photoModalWrap .cBlock2 td {
    font-size: 11px;
    font-family: 'Tahoma', 'Arial';
}
#photoModalWrap .cTop {
    border: 0;
}
#photoModalWrap .cBlock1, #photoModalWrap .cBlock2, #photoModalWrap .cMessage {
    border: 0 !important;
    background: none !important;
}
#photoModalWrap .cBlock1, #photoModalWrap .cBlock2 {
    border-top: 1px solid #e9edf1 !important;
}
#photoModalWrap .cMessage a:first-child img {
    margin: 0 5px 2px;
}
#photoModalWrap #addform, #photoModalWrap .commTable, #photoModalWrap .smiles {
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
}

Systems developer

joexyz

JOE-vascript

Posts: 1770

Reputation: 78

Message # 4 | 11:03 AM 2016-10-23

Soldierdevil, the Photo Albums module has a separate CSS template: http://take.ms/AN92F

hey i'm joe and i do not work for the company anymore, please contact other staff or tech support
icon by ch-chau

sometimes i lurk here

Soldierdevil

Posts: 154

Reputation: 1

Message # 5 | 11:13 AM 2016-10-23

bigblog, Yes have seen these template before...but the problem is it does not relate to the module. All classes are different. Currently i have even deleted the template code an nothing is there but the photo appearance has not been affected at all.

Added (2016-10-23, 11:13 AM)
---------------------------------------------
Ok can you tell me where i can locate these classes in that css code?

Code

$PHOTO$

Systems developer

joexyz

JOE-vascript

Posts: 1770

Reputation: 78

Message # 6 | 11:36 AM 2016-10-23

Soldierdevil, please, provide the URL address of your website so that we can give you a more specific answer.

hey i'm joe and i do not work for the company anymore, please contact other staff or tech support
icon by ch-chau

sometimes i lurk here

Soldierdevil

Posts: 154

Reputation: 1

Message # 7 | 5:47 AM 2016-10-24

My website is http://vodacop.com/. I am so frustrated that i can not change the appereance of the photo entries using the original photo CSS. The CSS provided does not relate at all.

If its only my control panel that has a different CSS please let me know and this is what i have here

Code

#dynPhoto {
padding: 0 10px;
}
#photoModalWrap, #photoModalWrap td {
font: 12px/1.5 'Arial';
color: #5d5d5d;
}
#photoModalWrap a {
color: #20a7fd;
}
#photoModalWrap a:hover {
color: #027fcf;
}
#photoModalWrap hr {
margin: 5px 0;
border: 0;
height: 2px;
overflow: hidden;
background: url(./../../img/photopage/hr.png) repeat-x;
}
#photoModalWrap .uphoto-entry {
margin-bottom: 1000px;
}
#photoModalWrap input[type=text], #photoModalWrap input[type=password], #photoModalWrap textarea {
vertical-align: middle;
height: 24px;
margin: 3px 0;
padding: 2px 5px;
*padding: 0px;
font-family: 'Tahoma', 'Arial';
font-size: 13px;
line-height: 18px;
color: #000;
background: #fff;
border: 1px solid #dcdcdc;
box-shadow: inset 0 1px 0 1px rgba(0, 0, 0, 0.03);
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#photoModalWrap input[type=text]:focus, #photoModalWrap input[type=password]:focus, #photoModalWrap textarea:focus {
border-color: #9c9c9c;
}
#photoModalWrap textarea {
padding: 3px 5px;
height: auto;
overflow: auto;
resize: none;
}
#photoModalWrap .securityCode {height: auto !important;}
#photoModalWrap #message {
width: 100%;
height: 100px !important;
}
#photoModalWrap input[type=button], #photoModalWrap input[type=submit], #photoModalWrap input[type=reset], #photoModalWrap .button, #photoModalWrap select {
position: relative;
display: inline-block;
vertical-align: middle;
min-width: 20px;
padding: 0 10px;
text-align: center;
text-decoration: none !important;
font: 13px/31px 'Verdana', 'Arial';
height: 31px;
color: #777 !important;
text-shadow: 0 1px 0 #fffcf6;
border: 1px solid #aaa;
border-radius: 3px;
background-color: #fff;
background-image: -webkit-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
background-image: -moz-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
background-image: -o-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
background-image: -ms-linear-gradient(bottom, rgba(85,85,85,.1), rgba(255,255,255,.1));
background-image: linear-gradient(to top, rgba(85,85,85,.1), rgba(255,255,255,.1));
box-shadow: inset 0 0 1px #fff;
*display: inline; /*--FOR-IE--*/
overflow: visible;
zoom: 1; /*--FOR-IE--*/
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#photoModalWrap select {height: auto !important;}
#photoModalWrap ::-moz-focus-inner {
border: 0;
padding: 0;
}
#photoModalWrap input[type=button]:hover, #photoModalWrap input[type=submit]:hover, #photoModalWrap input[type=reset]:hover, #photoModalWrap .button:hover {background-color: #fafafa;}
#photoModalWrap input[type=button]:active, #photoModalWrap input[type=submit]:active, #photoModalWrap input[type=reset]:active, #photoModalWrap .button:active {background-color: #fafafa;box-shadow: inset 0 1px 2px rgba(0,0,0,.17);}
#photoModalWrap .codeButtons {
min-width: 20px;
margin: 2px 1px !important;
padding: 1px 4px !important;
width: auto !important;
height: auto !important;
line-height: 1.4 !important;
}
#photoModalWrap .cBlock1, #photoModalWrap .cBlock2, #photoModalWrap .cBlock1 td, #photoModalWrap .cBlock2 td {
font-size: 11px;
font-family: 'Tahoma', 'Arial';
}
#photoModalWrap .cTop {
border: 0;
}
#photoModalWrap .cBlock1, #photoModalWrap .cBlock2, #photoModalWrap .cMessage {
border: 0 !important;
background: none !important;
}
#photoModalWrap .cBlock1, #photoModalWrap .cBlock2 {
border-top: 1px solid #e9edf1 !important;
}
#photoModalWrap .cMessage a:first-child img {
margin: 0 5px 2px;
}
#photoModalWrap #addform, #photoModalWrap .commTable, #photoModalWrap .smiles {
margin: 0 !important;
background: none !important;
border: 0 !important;
}

and this is what i have for appearance of entries

Code

<a href="$PHOTO_URL$">$PHOTO_NAME$</a>


$PHOTO$
<a href="$PHOTO_LIGHTBOX_URL$" data-url="$PHOTO_URL$" class="ph-link" title="Views: $REVIEWS$ | Dimensions: $PHOTO_SIZE$, $PHOTO_WEIGHT$Kb">


$DATE$
<?if(len($PHOTO_DESCR$)>120)?><?substr($PHOTO_DESCR$,0,117)?>...<?else?>$PHOTO_DESCR$<?endif?>
$USER$


</a>


<?if($MODER_PANEL$)?>$MODER_PANEL_RIGHT$<?endif?>
$REVIEWS$
<?if($COMMENTS_URL$)?><a href="$COMMENTS_URL$" class="phd-comments">$COMMENTS_NUM$</a><?endif?>
<?if($RATING$)?>

$RATING$

<?$RSTARS$('14','/.s/img/photopage/rstars.png','1','float' <img src="/.s/sm/1/wink.gif" border="0" align="absmiddle" alt="wink" /> ?>
<?endif?>

My point here is they dont relate at all and no changes on one affects the other. The css classes are completely different. Prove me wrong on this with a very clear explanation.

Systems developer

Cyberdasm

Posts: 639

Reputation: 7

Message # 8 | 7:38 AM 2016-10-24

Soldierdevil,

Quote Soldierdevil (

)

Ok can you tell me where i can locate these classes in that css code?

I've got your css codes here.

Since I'm not familiar with your template design. Much better that you copy the codes and upload it to your file manager. Then re-link it to all pages which is dependent by that css file. Or the best option is to override it. When you override put "!important" into it so that your override will take an effect.

1F4BF3B

Post edited by Cyberdasm - Monday, 2016-10-24, 8:24 AM

joexyz

JOE-vascript

Posts: 1770

Reputation: 78

Message # 9 | 5:20 PM 2016-10-24

Cyberdasm, that is a system resource. It can't be replaced.

Soldierdevil, try using the !important tag for properties that are already set in the system CSS file.

Code

property: value !important;

hey i'm joe and i do not work for the company anymore, please contact other staff or tech support
icon by ch-chau

sometimes i lurk here

Cyberdasm

Posts: 639

Reputation: 7

Message # 10 | 0:13 AM 2016-10-25

Quote bigblog (

)

Cyberdasm, that is a system resource. It can't be replaced.

bigblog, yes of course sir I know it. But I only give him insights on how to do it manually. It's because he is eager to edit the source code.

1F4BF3B

Soldierdevil

Posts: 154

Reputation: 1

Message # 11 | 6:51 AM 2016-10-25

Cyberdasm, thank you for the great help i really appreciate.

Quote

hat is a system resource. It can't be replaced.

This is very awkward and frustrating!!! why is it like this????

Quote

try using the !important tag for properties that are already set in the system CSS file.

I surely dont know how to do this...please explain more. My interest is to extent the width of photo entries to 100% on portrait view. By default photos remain same size and align on the left when viewing on a smartphone which doesnt look so nice to me. i want them to float: none; width: 100%;.

Another issue is i need space. I need 50GB but no current package provides this space and yet their space expire with subscription which is quite inconveniencing. What can i do??

Systems developer

joexyz

JOE-vascript

Posts: 1770

Reputation: 78

Message # 12 | 3:09 PM 2016-10-25

Soldierdevil,

Quote Soldierdevil (

)

float: none; width: 100%;

Code

float: none !important; width: 100% !important;

should work.

Quote Soldierdevil (

)

Another issue is i need space. I need 50GB but no current package provides this space and yet their space expire with subscription which is quite inconveniencing. What can i do??

Please, contact the technical support.

hey i'm joe and i do not work for the company anymore, please contact other staff or tech support
icon by ch-chau

sometimes i lurk here

Soldierdevil

Posts: 154

Reputation: 1

Message # 13 | 3:36 PM 2016-10-25

bigblog,

Quote

should work.

I am sorry if i am pestering someone..but surely i have no idea where to place that code you just provided. Really yes..i dont know where biggrin

Systems developer

joexyz

JOE-vascript

Posts: 1770

Reputation: 78

Message # 14 | 5:50 PM 2016-10-25

Soldierdevil, I'm basically telling you how to use the !important tag. You can apply the styles with the important tag to any class or ID of the Photo Albums module, like:

Code

.uphoto {
display: block !important;
width: 100% !important;
}

You can insert this either into the main style sheet of the website or the CSS template of the Photo Albums module.

You should consider playing around with the Developer Tools of your website first by pressing F12.

hey i'm joe and i do not work for the company anymore, please contact other staff or tech support
icon by ch-chau

sometimes i lurk here

Cyberdasm

Posts: 639

Reputation: 7

Message # 15 | 8:21 PM 2016-10-25

Quote bigblog (

)

.uphoto {
display: block !important;
width: 100% !important;
}

Soldierdevil, That is called overriding.

1F4BF3B

uCoz Community » For Webmasters » Design Customization » Where is css template for appearence of photos???

Page 1 of 2
1
2
»