CSS issues - Kunena/Jfusion

Hello,

I'm sorry if this is the wrong section but i've google'd for 2 weeks now without getting anywhere and since this issue appears with Kunena aswell i've assumed it might be caused by something in the template so hopefully someone here can help me.

We've set up The Game joomla theme with jfusion installed and the frameless integration running, everything runs fine except there is an issue with the "GO", "Search" and search bar items not displaying correctly.
From what i can see its caused by joomla.css but i honestly have no idea what needs to be edited to make this appear correctly on the PHPBB board.

This is what it currently looks like


Whilst this is what it should look like


Any help or a point in the right direction would be much appreciated

Could you give me URL to this page? Probably joomla.css overwrite default styles and this values need to be reset for this extension.

Could you give me URL to this page? Probably joomla.css overwrite default styles and this values need to be reset for this extension.

Hey, sorry about taking a while to reply. yeah I figured it was something there i tried removing the lines but then of course that broke the main sites CSS, just need to figure out how to stop Joomla overwriting the PHPBB board then i suppose which i have no idea.
Board link is: http://virtue-esports.com/forum

You will not avoid this because you are loading this phpBB inside template so template styles will always load - you can only rest this styles by adding new rules to this phpBB styles.

You will not avoid this because you are loading this phpBB inside template so template styles will always load - you can only rest this styles by adding new rules to this phpBB styles.

Hi thanks for the reply, by adding the rules i assume you mean create a new css style sheet for phpbb's style and link it with that style sheet with the rules there which will then stop Joomla from using its rules for phpbb?

thanks

This forum have own styles because they are loaded inside our product, all that you need to do is to overwrite select/input fields.

This forum have own styles because they are loaded inside our product, all that you need to do is to overwrite select/input fields.

Hey, thanks for replying i feel like i'm about to say something stupid but please bare with me since i've honestly spent 2 weeks trying to fix this before i came to the forums so i have no idea but okay so i'm just going to explain what i've gather from your help and the thought process in my head:

For the search box itself joomla.css has a field for input[type="Submit"] with this code that displays on the phpbb forum frameless integration

Code: Select all

 {
-webkit-appearance: none;
background: #d82731;   *This has a line through it on chrome so i assume its being overwritten already
border: none;                     *being overwritten already
color: #fff !important;
cursor: pointer;                  *being overwritten already
display: block;
float: left;
height: 38px;
line-height: 39px;
margin: 0 5px 2px 2px;  *being overwritten already
padding: 0 24px;             *being overwritten already
text-align: center;
text-transform: uppercase;
transition: all 0.3s ease-out 0s;  *being overwritten already
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}

When i disable it then it shows correctly on the site, the issue i find is that theres nothing i can overwrite because those boxes are just using the the default attributes so i don't exactly understand how i'd make them appear back as they should.

I understand from your last post that for example i could add the custom css as #phpbb height: 20px which would overwrite the current one of 38px but considering phpbb doesn't actually have css for display: and float: for the button i don't see how i can overwrite it since anything other than it being disabled on the joomla.css for it to display correctly.

Again i'm extremely sorry for my lack of understanding here which must be tedious and tiring for you to read and reply to. Never thought something that looked as simple as this would be so difficult to do

Kind Regards

Please add this code to override.css file in root/templates/gk_template_name/css directory :

Code: Select all

#phpbb input.inputbox { padding: 5px !important }
#phpbb a.button2, #phpbb input.button2, #phpbb input.button3 { height: 26px; line-height: 26px }
#phpbb fieldset.quick-login input { float: none; display: inline}


and then just remember to enable "Use override CSS" option in template advanced settings tab.

Please add this code to override.css file in root/templates/gk_template_name/css directory :

Code: Select all

#phpbb input.inputbox { padding: 5px !important }
#phpbb a.button2, #phpbb input.button2, #phpbb input.button3 { height: 26px; line-height: 26px }
#phpbb fieldset.quick-login input { float: none; display: inline}


and then just remember to enable "Use override CSS" option in template advanced settings tab.

This worked perfectly after i added a few extra lines thank you so much!

If you notice new problems you need to add special styles with #phpbb at the beginning to overwrite only this view.