Forum zajednice Joomla! Hrvatska

Predlošci, web design, web standardi => HTML/CSS development i standardi => Autor teme: eladio u 22. Prosinac 2012, 13:31

Naziv: read more button - problem s prikazom
Autor: eladio u 22. Prosinac 2012, 13:31
Evo ekipa trebam pomoć CSS maga  :nevin:
Dakle instalirao sam jfusion, i sad me content plugin "Discussion Bot" malo zeza... Naime navedeni plugin zaobilazi CSS templatea i dolazi do "pucanja" read more buttona u člancima.. (fotografija u prilogu)

dosao sam do zakljucka da navedeni plugin ima svoj php file koji izgleda ovako:
<?php foreach ($this->output['buttons'] AS $name => $html) :

echo 
'<a id="jfusionBtn' ucfirst($name) . $this->article->id .'" class="readon jfusionButton" target="'.$html['target'].'" href="'.$html['href'].'"';

if(isset(
$html['js'])) :
foreach($html['js'] AS $func => $js) :
echo " $func = \"$js\"\n";
endforeach;
endif;

//close opening a tag
echo ">";

echo 
$html['text'];

//add the number of replies to the discuss button html if set to do so
if($this->params->get("show_reply_num") && $name=='discuss') :
$post = ($this->reply_count==1) ? "REPLY" "REPLIES";
echo ' ['.$this->reply_count.' '.JText::_($post).']';
endif;

echo 
"</a>\n";

endforeach;
?>

..brijem da trebam korigirati class "readon jFusionButton" ali sve sto sam pokusavao nije uspjevalo


navedeni "Discussion Bot" ima i svoj CSS file , koji izgleda ovako:
#jfusionButtonArea {
margin-bottom: 10px;
}

.jfusionPostArea {
width:99%;
}

.jfusionPostHeader {
font-size:15px;
color:#000000;
font-weight:bold;
}

.jfusionRefreshLink {

}

.jfusionPostBody {
border:2px solid #afafaf;
min-height: 90px;
padding:10px;
margin-top:10px;
position: relative;
}

.jfusionPostTitle {
color:#000000;
float:left;
margin-right:4px;
font-size:15px;
}

.jfusionNoPostMsg {
font-weight:bold;
}

.jfusionPostUser {
font-size:15px;
}

.jfusionUserAvatar {
float:left;
margin-right:10px;
}

.jfusionPostDate {
font-size:10px;
}

.jfusionPostText {
margin-top:5px;
font-size:12px;
}

.jfusionToolbar {
text-align:right;
width:100%;
position: absolute;
bottom: 0;
margin-bottom: 5px;
left: -5px;
}

.jfusionToolbar span {
float:right;
}

.jfusionToolbar a, .jfusionToolbar a:hover, .jfusionToolbar a:active, .jfusionToolbar a:focus {
text-decoration:none;
}

.jfusionQuickReply {
margin-top: 10px;
}

.jfusionQuickReply textarea {
width:99%;
height: 150px;
}

.jfusionQuickReplyHeader {
font-weight:bold;
}

.jfusionButton {
margin-right: 5px;
}

#jfusionMessage, #jfusionErrorMessage {
margin-left:40px;
}

.jfusionErrorMessage {
color: #c00;
background: #E6C0C0 url(images/error.png) 4px center no-repeat;
border-top: 3px solid #DE7A7B;
border-bottom: 3px solid #DE7A7B;
width:99%;
margin-bottom:10px;
font-size: 12px;
font-weight:bold;
padding: 5px;
}

.jfusionLoadingMessage {
color: #c00;
background: #EFE7B8 url(images/loading.gif) 4px center no-repeat;
border-top: 3px solid #F0DC7E;
border-bottom: 3px solid #F0DC7E;
width:99%;
margin-bottom:10px;
font-size: 12px;
font-weight:bold;
padding: 5px;
}

.jfusionSuccessMessage {
color: #0055BB;
background: #C3D2E5 url(images/success.png) 4px center no-repeat;
border-top: 3px solid #84A7DB;
border-bottom: 3px solid #84A7DB;
width:99%;
margin-bottom:10px;
font-size: 12px;
font-weight:bold;
padding: 5px;
}

.jfusionButtonConfirmationBox {
    color: #0055BB;
    background: #C3D2E5;
    border-top: 3px solid #84A7DB;
    border-bottom: 3px solid #84A7DB;
    padding: 5px;
}

.jfusionclearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.bbcode_quote, .bbcode_code {
    margin-left: 10px;
    padding: 4px;
    border: 1px dashed black;
    background-color: #F5F5F5;
   
}

.bbcode_quote .bbcode_quote {
    background-color: #ECECEC;
}

.bbcode_quote .bbcode_quote .bbcode_quote {
background-color: #E5E5E5;
margin-bottom:4px;
}

.bbcode_quote_head, .bbcode_code_head {
    font-weight: bold;
}

/* .jfusionclearfix {display: inline-block;}  /* for IE/Mac  */

/*<!--[if IE]>
* html .jfusionclearfix {
zoom: 1;
display: block;
height: 1%;
}
<![endif]-->
*/

.jfusionclearfix {
   display: inline-block;
  }

html[xmlns] .jfusionclearfix {
   display: block;
}

/* debug styles put here as well so that IE does not loose CSS formatting when ajax rewrites data */
div.debug_0 .value {  background-color:#ecf8fd;  }
div.debug_0 .a_key {  background-color:#dbfede;  }
div.debug_0 .o_key {  background-color:#dbfede;  }
div.debug_0 .title {  background-color:#d6f2ff;  }
div.debug_0 .grid  {  font-family:arial; background-color:#fbfed6; vertical-align:top;  }


..ali ni tu nisam nasao neko rjesenje  :-X


CSS koji definira tempalte za navedeni button je ovaj (mislim) :
.readonstyle-button .readon {background: url(../images/style4/readon-r.png) 100% 0 no-repeat;}
.readonstyle-button .readon .button, .readonstyle-button .readon span {background: url(../images/style4/readon-l.png) 0 0 no-repeat;}





zna netko sta gdje kako da izmesarim ? mozgam vec satima, ali ne ide  :-[   hvala puno unaprijed  0:)

hvala


PS

tu sam nasao nesto sto bi moglo biti na tragu rjesenja mog problema:
http://www.rockettheme.com/forum/index.php?f=209&t=152171&rb_v=viewtopic

ali za sad jos nisam uspio
Naziv: Odg: read more button - problem s prikazom
Autor: eladio u 23. Prosinac 2012, 01:06
nitko ništa? može neki hint makar, ideja neka?

sad vec razmisljam da pojednostavnim nekako taj glupi button pa da izmjenim direktno glavni template.. lol
Naziv: Odg: read more button - problem s prikazom
Autor: eladio u 24. Prosinac 2012, 23:50
ajde makar vidim da nisam sam u ovom problemu..

http://www.jfusion.org/forums/viewtopic.php?f=14&t=7939   :-[
Naziv: Odg: read more button - problem s prikazom
Autor: eladio u 26. Prosinac 2012, 21:50
Izgleda da je ovo riješenje :

"Hi, if you are coding in the read more, you have to wrap the text in a <span> tag inside the <a> tag - like

    <a href="#" class="readon"><span>TEXT</span></a>

The other half of the image comes from the span tag. Hope that helps."


E sad, kako dodati SPAN oko texta za ovaj plugin?
Naziv: Odg: read more button - problem s prikazom
Autor: Dario u 30. Prosinac 2012, 22:14
Citat: eladio  u 26. Prosinac 2012, 21:50
Izgleda da je ovo riješenje :

"Hi, if you are coding in the read more, you have to wrap the text in a <span> tag inside the <a> tag - like

    <a href="#" class="readon"><span>TEXT</span></a>

The other half of the image comes from the span tag. Hope that helps."


E sad, kako dodati SPAN oko texta za ovaj plugin?

Ako je to rješenje onda evo i prepravke...


<?php foreach ($this->output['buttons'] AS $name => $html) :

echo 
'<a id="jfusionBtn' ucfirst($name) . $this->article->id .'" class="readon jfusionButton" target="'.$html['target'].'" href="'.$html['href'].'"';

if(isset(
$html['js'])) :
foreach($html['js'] AS $func => $js) :
echo " $func = \"$js\"\n";
endforeach;
endif;

//close opening a tag
echo "><span>";

echo 
$html['text'];

//add the number of replies to the discuss button html if set to do so
if($this->params->get("show_reply_num") && $name=='discuss') :
$post = ($this->reply_count==1) ? "REPLY" "REPLIES";
echo ' ['.$this->reply_count.' '.JText::_($post).']';
endif;

echo 
"<span></a>\n";

endforeach;
?>

Naziv: Odg: read more button - problem s prikazom
Autor: eladio u 31. Prosinac 2012, 18:34
to je TO

riješeno  :pivo: