Page 1 of 212»
Forum moderator: bigblog 
uCoz Community » For Webmasters » Design Customization » Where is css template for appearence of photos???
Where is css template for appearence of photos???
Soldierdevil
Posts: 122
Reputation: 0
Message # 1 | 4:05 PM
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????


I hate politics, people who do not make an effort with people and those who try hard to be cool
Cyberdasm
Posts: 553
Reputation: 2
Message # 2 | 7:10 AM
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

admin@lizeal.tk
www.lizeal.tk
Soldierdevil
Posts: 122
Reputation: 0
Message # 3 | 8:56 AM
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;
}

I hate politics, people who do not make an effort with people and those who try hard to be cool
bigblog
Great & Powerful
Posts: 1298
Reputation: 62
Message # 4 | 11:03 AM
Soldierdevil, the Photo Albums module has a separate CSS template: http://take.ms/AN92F
trixie took over this account halp
Soldierdevil
Posts: 122
Reputation: 0
Message # 5 | 11:13 AM
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
<span class="uphoto">
<span class="photo-block">
<span class="ph-wrap">
<span class="ph-tc">$PHOTO$</span>

I hate politics, people who do not make an effort with people and those who try hard to be cool
bigblog
Great & Powerful
Posts: 1298
Reputation: 62
Message # 6 | 11:36 AM
Soldierdevil, please, provide the URL address of your website so that we can give you a more specific answer.
trixie took over this account halp
Soldierdevil
Posts: 122
Reputation: 0
Message # 7 | 5:47 AM
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
<span class="uphoto">
<span class="photo-title"><a href="$PHOTO_URL$">$PHOTO_NAME$</a></span>
<span class="photo-block">
<span class="ph-wrap">
<span class="ph-tc">$PHOTO$</span>
<a href="$PHOTO_LIGHTBOX_URL$" data-url="$PHOTO_URL$" class="ph-link" title="Views: $REVIEWS$ | Dimensions: $PHOTO_SIZE$, $PHOTO_WEIGHT$Kb">
<span class="ph-tc">
<span class="ph-data">
<span class="ph-date">$DATE$</span>
<span class="ph-descr"><?if(len($PHOTO_DESCR$)>120)?><?substr($PHOTO_DESCR$,0,117)?>...<?else?>$PHOTO_DESCR$<?endif?></span>
<span class="ph-author" href="$PROFILE_URL$">$USER$</span>
</span>
</span>
</a>
</span>
<span class="ph-details ph-js-details">
<?if($MODER_PANEL$)?><span style="position: absolute;z-index: 100;left: 15px;white-space: nowrap;">$MODER_PANEL_RIGHT$</span><?endif?>
<span class="phd-views">$REVIEWS$</span>
<?if($COMMENTS_URL$)?><a href="$COMMENTS_URL$" class="phd-comments">$COMMENTS_NUM$</a><?endif?>
<?if($RATING$)?>
<span class="phd-rating">
<span id="entRating$ID$">$RATING$</span>
</span>
<span class="phd-dorating"><?$RSTARS$('14','/.s/img/photopage/rstars.png','1','float' <img src="/.s/sm/1/wink.gif" border="0" align="absmiddle" alt="wink" /> ?></span>
<?endif?>
</span>
</span>
</span>


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.

I hate politics, people who do not make an effort with people and those who try hard to be cool
Cyberdasm
Posts: 553
Reputation: 2
Message # 8 | 7:38 AM
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

admin@lizeal.tk
www.lizeal.tk
Post edited by Cyberdasm - Monday, 2016-10-24, 8:24 AM
bigblog
Great & Powerful
Posts: 1298
Reputation: 62
Message # 9 | 5:20 PM
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;

trixie took over this account halp
Cyberdasm
Posts: 553
Reputation: 2
Message # 10 | 0:13 AM
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

admin@lizeal.tk
www.lizeal.tk
Soldierdevil
Posts: 122
Reputation: 0
Message # 11 | 6:51 AM
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??

I hate politics, people who do not make an effort with people and those who try hard to be cool
bigblog
Great & Powerful
Posts: 1298
Reputation: 62
Message # 12 | 3:09 PM
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.

trixie took over this account halp
Soldierdevil
Posts: 122
Reputation: 0
Message # 13 | 3:36 PM
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

I hate politics, people who do not make an effort with people and those who try hard to be cool
bigblog
Great & Powerful
Posts: 1298
Reputation: 62
Message # 14 | 5:50 PM
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.

trixie took over this account halp
Cyberdasm
Posts: 553
Reputation: 2
Message # 15 | 8:21 PM
Quote bigblog ()
.uphoto {
   display: block !important;
   width: 100% !important;
}

Soldierdevil, That is called overriding.

1F4BF3B

admin@lizeal.tk
www.lizeal.tk
uCoz Community » For Webmasters » Design Customization » Where is css template for appearence of photos???
Page 1 of 212»
Search: