Forums

Unfortunately no one can be told what FluxBB is - you have to see it for yourself.

You are not logged in.

#1 2014-07-11 09:53:59

joel
Member
Registered: 2014-07-04
Posts: 132

conflict with mobile view for victory style. PIctures

look the circle mark in red.

mobileconf.png

Last edited by joel (2014-07-11 09:57:02)

Offline

#2 2014-07-11 09:58:15

joel
Member
Registered: 2014-07-04
Posts: 132

Re: conflict with mobile view for victory style. PIctures

Offline

#3 2014-07-11 10:13:36

seven
Member
From: Torino, Italy
Registered: 2010-08-19
Posts: 159
Website

Re: conflict with mobile view for victory style. PIctures

Try this with your browser's developer tools:

.pun .crumbs li {display:block;}
.pun .subscribelink {display:block;}

gamezoo.org - serious gaming services for serious gamers.

Offline

#4 2014-07-11 10:18:51

joel
Member
Registered: 2014-07-04
Posts: 132

Re: conflict with mobile view for victory style. PIctures

Please with a simple language.... where to put this code exactly? what to look for and what to edit in there?

Offline

#5 2014-07-11 12:27:24

seven
Member
From: Torino, Italy
Registered: 2010-08-19
Posts: 159
Website

Re: conflict with mobile view for victory style. PIctures

Test the page with Firefox's developer tools (hit F12 to make them appear).

1) choose flexible visualization, on the lower left corner you'll see a handle to reduce the viewport (like a mobile device)
2) hit the select element button, and point it to the <li> element of the breadcrumb. The CSS will appear on the lower right column.
3) double-click to add a new rule. Write "display" followed by "block". The CSS will be applied instantly.
4) repeat steps 2 & 3, this time selecting the "subscribe" link.

These instructions will help you while testing the CSS. Once you got this right, you only have to edit the relevant CSS file (victory.css, inside the /style/ folder). You can even see the line number in Firefox's devtools, right to the css line you edited.

Explanatory screenshot:

http://postimg.org/image/6sonikkhf/


gamezoo.org - serious gaming services for serious gamers.

Offline

#6 2014-07-13 11:58:33

joel
Member
Registered: 2014-07-04
Posts: 132

Re: conflict with mobile view for victory style. PIctures

i have glance over your illustration and i am still finding it difficult to understand,.

beside i use windows and i don't have Firefox developer tools. how do i edit the ccs from notepad? i i will prefer the forum name to fall down when view topic.

like

index
forum name
topic


and not
index/ forum name/

Offline

#7 2014-07-13 12:53:43

Sxderp
Member
Registered: 2012-11-02
Posts: 30

Re: conflict with mobile view for victory style. PIctures

joel wrote:

i have glance over your illustration and i am still finding it difficult to understand,.

beside i use windows and i don't have Firefox developer tools. how do i edit the ccs from notepad? i i will prefer the forum name to fall down when view topic.

like

index
forum name
topic


and not
index/ forum name/

The reason Seven suggests what he did is that finding the corresponding style in the CSS file is a pain.
By using the FireFox "inspect element" (right click and click 'inspect element') you can figure out what needs to be changed more easily. I suggest you get FireFox and start messing around with the "inspect element" function. It can be incredibly useful.

Now, on to how to fix  your problem.


---

#
#---------[ 2. OPEN ]---------------------------------------------------------
#

/styles/victory.css


#
#---------[ 3. FIND (line: 483) ]---------------------------------------------
#

.pun .postlinksb .crumbs {

#
#---------[ 4. REPLACE WITH ]-------------------------------------------------
#

.pun .linksb .crumbs, .pun .postlinksb .crumbs {

#
#---------[ 5. SAVE/UPLOAD ]-------------------------------------------------
#

Offline

#8 2014-07-13 17:43:28

joel
Member
Registered: 2014-07-04
Posts: 132

Re: conflict with mobile view for victory style. PIctures

hello, there is space at the header now. i don't just know what i did. just look at it.

snapp.png

Offline

#9 2014-07-16 16:55:37

joel
Member
Registered: 2014-07-04
Posts: 132

Re: conflict with mobile view for victory style. PIctures

hello any help?

Offline

#10 2014-07-16 17:13:36

joel
Member
Registered: 2014-07-04
Posts: 132

Re: conflict with mobile view for victory style. PIctures

Sxderp wrote:
joel wrote:

i have glance over your illustration and i am still finding it difficult to understand,.

beside i use windows and i don't have Firefox developer tools. how do i edit the ccs from notepad? i i will prefer the forum name to fall down when view topic.

like

index
forum name
topic


and not
index/ forum name/

The reason Seven suggests what he did is that finding the corresponding style in the CSS file is a pain.
By using the FireFox "inspect element" (right click and click 'inspect element') you can figure out what needs to be changed more easily. I suggest you get FireFox and start messing around with the "inspect element" function. It can be incredibly useful.

Now, on to how to fix  your problem.


---

#
#---------[ 2. OPEN ]---------------------------------------------------------
#

/styles/victory.css


#
#---------[ 3. FIND (line: 483) ]---------------------------------------------
#

.pun .postlinksb .crumbs {

#
#---------[ 4. REPLACE WITH ]-------------------------------------------------
#

.pun .linksb .crumbs, .pun .postlinksb .crumbs {

#
#---------[ 5. SAVE/UPLOAD ]-------------------------------------------------
#

i tried this and didn't work

Offline

#11 2014-07-18 21:46:03

Sxderp
Member
Registered: 2012-11-02
Posts: 30

Re: conflict with mobile view for victory style. PIctures

joel wrote:

i tried this and didn't work

Was the extra header space created after trying my fix?

---

Revert your installation to defaults by either
1) Restoring backups (which you should of made before starting any modifications ...)

2) Redownloading the Victory style.


Then try my edit again. This is what happens with my edit. Taken from a picture on my phone.
http://ncgamers.org/img/victory.png

Last edited by Sxderp (2014-07-18 22:29:03)

Offline

#12 2014-07-19 04:10:26

joel
Member
Registered: 2014-07-04
Posts: 132

Re: conflict with mobile view for victory style. PIctures

no the dpace was not as a result of your mods. i guest it was during the installation of mode. I really dont know the actuall mod that made it like that.

Offline

#13 2014-07-19 04:15:27

joel
Member
Registered: 2014-07-04
Posts: 132

Re: conflict with mobile view for victory style. PIctures

umm. I will try that again with fresh copy.

Offline

#14 2014-07-19 07:57:17

joel
Member
Registered: 2014-07-04
Posts: 132

Re: conflict with mobile view for victory style. PIctures

sorry did not work.

Last edited by joel (2014-07-19 09:50:06)

Offline

#15 2014-07-19 09:50:35

joel
Member
Registered: 2014-07-04
Posts: 132

Re: conflict with mobile view for victory style. PIctures

i thought it  work but it did not work

Offline

#16 2014-07-19 13:43:02

Sxderp
Member
Registered: 2012-11-02
Posts: 30

Re: conflict with mobile view for victory style. PIctures

A couple questions.

1)
What other modifications do you have installed?
(List all of them)

2)
What phone and phone browser are you testing on?

---

Edit:
Actually I think I figured out why you still have the problem. It is because you have the "allow topic subscriptions" option enabled. I do not have this enabled and therefore the margin was enough for me.

The following changes will allow you to enable or disable the aforementioned setting and prevent the links from overlapping.

**Start with a fresh copy of victory.css**

Edit2:
Should I pastebin this stuff?

---

#
#---------[ 1. OPEN ]---------------------------------------------------------
#

/styles/victory.css


#
#---------[ 2. FIND (line: 483) ]-----------------------------------------------
#

.pun .postlinksb .crumbs {
	margin-right: 11em;
}

.pun .crumbs li {
	float: left;
	padding-right: 0.4em;
	white-space: nowrap;
}

#
#---------[ 3. REPLACE WITH ]------------------------------------------------
#

.pun .crumbs {
	clear: none;
}

.pun .crumbs li {
	display: inline-block;
	padding-right: 0.4em;
}

#
#---------[ 4. FIND (line: 532) ]-----------------------------------------------
#

.pun .subscribelink {
	position: absolute;
	right: 0;
	text-align: right;
	top: 33px;
}

#
#---------[ 5. REPLACE WITH ]------------------------------------------------
#

.pun .subscribelink {
	float: right;
}

#
#---------[ 6. SAVE/UPLOAD ]-------------------------------------------------
#
#
#
#
#
#---------[ 7. OPEN ]---------------------------------------------------------
#

/viewforum.php


#
#---------[ 8. FIND (line: 439) ]-----------------------------------------------
#
### IMPORTANT ###
These two lines may appear multiple times. Make sure it is the LAST occurrence
in the file. This is roughly line 439.
### IMPORTANT ###

			<ul class="crumbs">
				<li><a href="index.php"><?php echo $lang_common['Index'] ?></a></li>

#
#---------[ 9. BEFORE, ADD ]-------------------------------------------------
#

<?php echo (!empty($forum_actions) ? "\t\t".'<p class="subscribelink clearb">'.implode(' - ', $forum_actions).'</p>'."\n" : '') ?>

#
#---------[ 10. FIND (line: 445) ]---------------------------------------------
#

<?php echo (!empty($forum_actions) ? "\t\t".'<p class="subscribelink clearb">'.implode(' - ', $forum_actions).'</p>'."\n" : '') ?>

#
#---------[ 11. DELETE PREVIOUS ]-------------------------------------------
#
#
#
#
#
#---------[ 12. SAVE/UPLOAD ]-----------------------------------------------
#
#
#
#
#
#---------[ 13. OPEN ]-------------------------------------------------------
#

/viewtopic.php


#
#---------[ 14. FIND (line: 391) ]---------------------------------------------
#
### IMPORTANT ###
These two lines may appear multiple times. Make sure it is the LAST occurrence
in the file. This is roughly line 391.
### IMPORTANT ###

		<ul class="crumbs">
			<li><a href="index.php"><?php echo $lang_common['Index'] ?></a></li>

#
#---------[ 15. BEFORE, ADD ]------------------------------------------------
#

<?php echo $subscraction ?>

#
#---------[ 16. FIND (line: 397) ]---------------------------------------------
#

<?php echo $subscraction ?>

#
#---------[ 17. DELETE PREVIOUS ]-------------------------------------------
#
#
#
#
#
#---------[ 18. SAVE/UPLOAD ]-----------------------------------------------
#
#

Last edited by Sxderp (2014-07-19 16:50:27)

Offline

#17 2014-07-19 17:53:22

joel
Member
Registered: 2014-07-04
Posts: 132

Re: conflict with mobile view for victory style. PIctures

ok thanks and  i will try that out when i get to the computer. I guess you are correct its the subscribe to forum remaining the last time i tried it. Will get back to you.

Offline

#18 2014-07-21 11:37:13

joel
Member
Registered: 2014-07-04
Posts: 132

Re: conflict with mobile view for victory style. PIctures

it worked now thanks

picture worked.png

Last edited by joel (2014-07-21 11:38:06)

Offline

#19 2014-07-21 18:38:48

Sxderp
Member
Registered: 2012-11-02
Posts: 30

Re: conflict with mobile view for victory style. PIctures

You're welcome.

Offline

#20 2014-07-22 10:34:36

joel
Member
Registered: 2014-07-04
Posts: 132

Re: conflict with mobile view for victory style. PIctures

i found the mod that create the space in the header.

here is the screenshot

header.png


##        Friend Mod.
##        Mod title:  Amici
##
##      Mod version:  1.0.5
##


in

header.php

#--[ 8 FIND ] ---------------------------------

 <link rel="stylesheet" type="text/css" href="style/<?php echo $pun_user['style'].'.css' ?>" />

#--[ 9 INSERT AFTER ]------------------------

    

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.min.js'></script>

<style type="text/css">
.tabavviso {color:#000; background:#ffffff; border:1px solid #800000; width: 500px; padding:5px; margin:20px; 
			position: absolute; top: 30px; margin-bottom:5px;
			-webkit-border-bottom-left-radius:7px; -webkit-border-bottom-right-radius:7px; -webkit-border-top-left-radius:7px; -webkit-border-top-right-radius:7px;
			-khtml-border-radius-bottomleft:7px; -khtml-border-radius-bottomright:7px; -khtml-border-radius-topleft:7px; -khtml-border-radius-topright:7px;
			-moz-border-radius-bottomleft:7px; -moz-border-radius-bottomright:7px; -moz-border-radius-topleft:7px; -moz-border-radius-topright:7px; border-radius:7px;
			box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4);-moz-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4);-webkit-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4);}
.avviso {font-family: "Trebuchet", "Verdana", "Lucida Grande", "Sapir Sans", "Tahoma", "Sans-Serif"; text-align: left;
		font-size:12.73px; color: #800000; text-decoration:none; font-weight:bold; padding-left: 10px;}
</style>

<?php
function mostraavviso($messaggio,$pagina) {
		setcookie('avviso','',-1,'/');
		$avvisot="<script type=\"text/javascript\">	//alert('lll');
								var distanza=((document.body.clientWidth)/2)-280;
								var stilebrowser='style=\"left: '+distanza+'px;\"';
						jQuery(\"#avviso\").fadeTo(200, 0.1, function() {
								jQuery(\"#avviso\").css(\"display\", \"block\");
								jQuery(\"#avviso\").html(\"<div class='tabavviso' \"+stilebrowser+\" ><span class='avviso'>".$messaggio."</span></div>\");
								jQuery(\"#avviso\").fadeTo(900,1);        
							}); 	
						setTimeout('jQuery(\"#avviso\").fadeOut(\"slow\")',4000);
					</script>";
		setcookie('avviso',"$avvisot",time()+5000,'/');
		header("Location: $pagina",true); exit();
	}
?>

<br /><br /><div id="avviso">
<?php
$avviso=''; 
if (isset($_COOKIE['avviso']) && !empty($_COOKIE['avviso'])) {
		$avviso=$_COOKIE['avviso'];
		echo $avviso;
		setcookie('avviso','',-1,'/');
	}
?>
</div><br />

is there anyway i can insert this code in other place? so as to remove the space from the header?



and also i insert a smaller banner and there was another space below. here is the banner.

banner_space.png

how to remove the space from css?.

lastly favicon, i tried everything. the favicon will still not show up.

waiting for someone to help.

thanks friends.

Last edited by joel (2014-07-22 10:36:19)

Offline

#21 2014-07-22 11:11:48

chris98
Member
From: England, United Kingdom
Registered: 2013-05-31
Posts: 393
Website

Re: conflict with mobile view for victory style. PIctures

lastly favicon, i tried everything. the favicon will still not show up.

Clear your browser cache and it will appear.

Offline

#22 2014-07-22 14:34:55

joel
Member
Registered: 2014-07-04
Posts: 132

Re: conflict with mobile view for victory style. PIctures

chris98 wrote:

lastly favicon, i tried everything. the favicon will still not show up.

Clear your browser cache and it will appear.

I have done that for days now. Still nothing is showing.

Offline

#23 2014-07-22 15:00:30

joel
Member
Registered: 2014-07-04
Posts: 132

Re: conflict with mobile view for victory style. PIctures

small banner fixed.

open victory.css

Find

primary {
		background: #FFB2CC url(Victory/img/logo.gif) no-repeat top center;
		height: 140px;
	}

Replace with any number, but for me i put 70

primary {
		background: #FFB2CC url(Victory/img/logo.gif) no-repeat top center;
		height: 70px;
	}

screenshot
banner_space_fixed.png

Offline

#24 2014-07-22 15:40:17

chris98
Member
From: England, United Kingdom
Registered: 2013-05-31
Posts: 393
Website

Re: conflict with mobile view for victory style. PIctures

joel wrote:
chris98 wrote:

lastly favicon, i tried everything. the favicon will still not show up.

Clear your browser cache and it will appear.

I have done that for days now. Still nothing is showing.

See this topic: https://fluxbb.org/forums/viewtopic.php?id=7247

Offline

Board footer

Powered by FluxBB 1.5.6