PDA

View Full Version : need css help for box plz


BJmal
10-31-2007, 02:59 AM
hello
i just work on my custom vivvo homepage
my problem is css:(
for example I change poll place and it look like not good cuz
some of it out of box
as you see here
http://news.3walim.com

for most comment and most pupolar it also have not good look I thinkg the problem on css but I really don’t know what basic of vivvo template and box css

so plz help :(

Micha
10-31-2007, 08:44 AM
I think that this has to do with HTML structure of the template rather than CSS.

Let's look at your site, you have box "Advert" above poll box that looks fine.

Now the structure of that box goes something like this:

<div id="my_box_id" class="box">
<div class="box_title_holder">
<div class="box_title">TITLE</div>
</div>
<div class="box_body">
<div class="box_content">
CONTENT
</div>
</div>
</div>

and structure of poll box looks like this:

<div id="box_poll" class="box">
<div class="box_title">
<span>TITLE</span>
</div>
<div class="box_body">
CONTENT (in this case Poll)
</div>
</div>

So what are you missing here:

<div class="box_title"> instead of <span> for the TITLE, and <div class="box_content"> wrapper around CONTENT.

Hope that helped :)

BJmal
10-31-2007, 07:30 PM
thanks for reply
actully this is what on box of poll
I have creat my_poll.tpl
and this is what he have
<vte:template>
<div id="my_box_id" class="box">
<div class="box_title_holder">
<div class="box_title">TITLE</div>
</div>
<div class="box_content">
<vte:include file="{VIVVO_TEMPLATE_DIR}box/plugin_poll.tpl" />
</div>
</div>
</vte:template>

now if you check it again here
http://news.3walim.com
you will note some of word out of box so question is
how make this word not out of box

thanks

Micha
11-01-2007, 09:14 AM
<vte:template>
<div id="my_box_id" class="box">
<div class="box_title_holder">
<div class="box_title">TITLE</div>
</div>
<div class="box_content">
<vte:include file="{VIVVO_TEMPLATE_DIR}box/plugin_poll.tpl" />
</div>
</div>
</vte:template>



Why did you created a new template and included entire plugin_poll.tpl:confused:

You just need to edit HTML structure of plugin_poll.tpl to match this structure:
<div id="my_box_id" class="box">
<div class="box_title_holder">
<div class="box_title">TITLE</div>
</div>
<div class="box_body">
<div class="box_content">
CONTENT
</div>
</div>
</div>

BJmal
11-02-2007, 12:42 AM
this is full code
<vte:template>
<vte:header type="css" href="{VIVVO_THEME}css/plugin_poll.css" />
<vte:box module="box_poll">
<vte:params>
<vte:param name="search_pid" value="{poll.id}" />
<vte:param name="cache" value="1" />
</vte:params>
<vte:template>
<vte:if test="{poll}">
<vte:if test="{ajax_output}">
<div>
<vte:foreach item = "answer" from = "{answer_list}" key="index">
<label>
<vte:value select="{answer.answer}" /><br />
<img src="{VIVVO_THEME}img/poll_bar.gif" style="width:{answer.get_percent}px;height:15px;" />
<vte:value select="{answer.vote}" />
</label>
</vte:foreach>
<div class="button_holder"><a href="{VIVVO_URL}app/poll"><vte:value select="{LNG_PLUGIN_POLL_VIEW_ALL_POLLS}" /></a></div>
</div>
<vte:else>
<div id="box_poll" class="box">
<div class="box_title"><span><vte:value select="{LNG_PLUGIN_POLL_POLL}" />: <vte:value select="{poll.name}" /></span></div>
<div class="box_body">
<span class="poll_question"><vte:value select="{poll.question}" /></span>

<vte:if test="{poll.is_voted}">
<vte:if test="{answer_list}">
<vte:foreach item = "answer" from = "{answer_list}" key="index">
<label>
<vte:value select="{answer.answer}" /><br />
<img src="{VIVVO_THEME}img/poll_bar.gif" style="width:{answer.get_percent}px;height:15px;" />
<vte:value select="{answer.vote}" />
</label>
</vte:foreach>
<div class="button_holder"><a href="{VIVVO_URL}app/poll"><vte:value select="{LNG_PLUGIN_POLL_VIEW_ALL_POLLS}" /></a></div>
</vte:if>
<vte:else>
<vte:if test="{answer_list}">
<div id="poll_form_holder">
<form method="post" id="poll_form" onsubmit="updatePoll();return false;">
<input type="hidden" name="action" value="poll" />
<input type="hidden" name="cmd" value="vote" />
<vte:foreach item = "answer" from = "{answer_list}" key="index">
<label>
<input type="radio" name="PLUGIN_POLL_answer_id" value="{answer.id}" />
<vte:value select="{answer.answer}" />
</label>
</vte:foreach>
<div class="button_holder"><input type="submit" name="submit" value="Vote" /> <a href="{VIVVO_URL}app/poll"><vte:value select="{LNG_PLUGIN_POLL_VIEW_ALL_POLLS}" /></a></div>
</form>
</div>
<script type="text/javascript">
function updatePoll(){
pollParam = $('poll_form').serialize(true);
pollParam.template_output = 'box/plugin_poll';

new Ajax.Updater('poll_form_holder', '<vte:value select="{VIVVO_URL}" />index.php', {
parameters: pollParam,
evalScripts: false
});
}
</script>
</vte:if>
</vte:else>
</vte:if>
</div>
</div>
</vte:else>
</vte:if>
</vte:if>
</vte:template>
</vte:box>
</vte:template>
could you plz edite it and give me after make it for box as I want?plz

thanks

Micha
11-02-2007, 08:10 AM
Here you go:

<vte:template>
<vte:header type="css" href="{VIVVO_THEME}css/plugin_poll.css" />
<vte:box module="box_poll">
<vte:params>
<vte:param name="search_pid" value="{poll.id}" />
<vte:param name="cache" value="1" />
</vte:params>
<vte:template>
<vte:if test="{poll}">
<vte:if test="{ajax_output}">
<div>
<vte:foreach item = "answer" from = "{answer_list}" key="index">
<label>
<vte:value select="{answer.answer}" /><br />
<img src="{VIVVO_THEME}img/poll_bar.gif" style="width:{answer.get_percent}px;height:15px;" />
<vte:value select="{answer.vote}" />
</label>
</vte:foreach>
<div class="button_holder"><a href="{VIVVO_URL}app/poll"><vte:value select="{LNG_VIEW_ALL_POLLS}" /></a></div>
</div>
<vte:else>
<div id="box_poll" class="box">
<div class="box_title_holder"><div class="box_title"><vte:value select="{LNG_POLL}" />: <vte:value select="{poll.name}" /></div></div>
<div class="box_body">
<div class="box_content">
<span class="poll_question"><vte:value select="{poll.question}" /></span>

<vte:if test="{poll.is_voted}">
<vte:if test="{answer_list}">
<vte:foreach item = "answer" from = "{answer_list}" key="index">
<label>
<vte:value select="{answer.answer}" /><br />
<img src="{VIVVO_THEME}img/poll_bar.gif" style="width:{answer.get_percent}px;height:15px;" />
<vte:value select="{answer.vote}" />
</label>
</vte:foreach>
<div class="button_holder"><a href="{VIVVO_URL}app/poll"><vte:value select="{LNG_VIEW_ALL_POLLS}" /></a></div>
</vte:if>
<vte:else>
<vte:if test="{answer_list}">
<div id="poll_form_holder">
<form method="post" id="poll_form" onsubmit="updatePoll();return false;">
<input type="hidden" name="action" value="poll" />
<input type="hidden" name="cmd" value="vote" />
<vte:foreach item = "answer" from = "{answer_list}" key="index">
<label>
<input type="radio" name="PLUGIN_POLL_answer_id" value="{answer.id}" />
<vte:value select="{answer.answer}" />
</label>
</vte:foreach>
<div class="button_holder"><input type="submit" name="submit" value="Vote" /> <a href="{VIVVO_URL}app/poll">All polls</a></div>
</form>
</div>
<script type="text/javascript">
function updatePoll(){
pollParam = $('poll_form').serialize(true);
pollParam.template_output = 'box/plugin_poll';

new Ajax.Updater('poll_form_holder', '<vte:value select="{VIVVO_URL}" />index.php', {
parameters: pollParam,
evalScripts: false
});
}
</script>
</vte:if>
</vte:else>
</vte:if>
</div>
</div>
</div>
</vte:else>
</vte:if>
</vte:if>
</vte:template>
</vte:box>
</vte:template>

BJmal
11-02-2007, 08:12 PM
thanks so much