The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Couple of design questions

View previous topic View next topic Go down

Solved Couple of design questions

Post by Rhino.Freak on November 12th 2015, 2:51 pm

Hey guys its me again and I have more "questions" Razz

1. How do I get rid of the ugly corner images?
2. Which selector should I use to select all of the forum's a or links? Basically I want to have links in posts,widgets,announcements,and here styled in a certain way BUT that style shouldn't effect other links like navigation bar, forum title etc..?
3. How do I insert font awesome links before navigation bar links?


4. Is there any way to add any transition effect for the little menu that pop ups upon clicking on "Welcome USERNAME" and "Notifications" ?
5. Does anyone know why the post author details part is made "p" in html? What If I edit my templates and make it a span instead?


Thanks a lot!
Phpbb3
Forum Link


Last edited by Rhino.Freak on November 24th 2015, 3:17 pm; edited 3 times in total

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Couple of design questions

Post by APE on November 12th 2015, 7:25 pm

Them white bits are to make the corners look rounded
You can remove them by following this easy step.

ACP >> Display Tab >>  Pictures and Colors >> Pics management >> Advanced Mode

  Round left corners on colored background : Remove the code
 Round right corners on colored background : Remove the code

or you can re color them to fit in with your forum color

Than Save   


  Note: If you remove them your forum items will no longer look round your have to code your forum in CSS to make them look round again





APE
Manager
Manager

Male Posts : 8311
Reputation : 716
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Couple of design questions

Post by Rhino.Freak on November 13th 2015, 3:24 pm

Thanks! That takes care of 1 thing Very Happy

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Couple of design questions

Post by SLGray on November 13th 2015, 5:04 pm

Please change the title of your topic to something that is related to your question/issue, so that other users will be able to find their question/issue using the search engine.



When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35622
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Couple of design questions

Post by Rhino.Freak on November 13th 2015, 5:15 pm

@SLGray wrote:Please change the title of your topic to something that is related to your question/issue, so that other users will be able to find their question/issue using the search engine.


I don't have just 1 questions as you can see, what can I name my topic that covers all of them? Enlighten me please.

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Couple of design questions

Post by SLGray on November 14th 2015, 12:12 am

Nevermind about changing the title.

What exactly do you mean by this:  3. How do I insert font awesome links before navigation bar links?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35622
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Couple of design questions

Post by Rhino.Freak on November 14th 2015, 7:48 am

I want to add a "home" fontawesome icon before "home" text etc..

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Couple of design questions

Post by brandon_g on November 14th 2015, 2:54 pm

Hello Rhino,

For number 3 have you considered requesting in the GFX Design section a navigation bar with the font awesome icons you want?

-Brandon


Remember to mark your topic when a solution is found.

brandon_g
Support Moderator
Support Moderator

Male Posts : 5139
Reputation : 478
Language : English
Location : USA

http://broadcastingduo.forumotion.com/

Back to top Go down

Solved Re: Couple of design questions

Post by Rhino.Freak on November 15th 2015, 12:41 pm

@brandon_g It appears you misunderstood me. I meant it solely by CSS, no imagery involved at all.

I managed to add it but it looks like this :
I used the following code for it :
Code:
.navbar a.mainmenu[href="/"]:before {
    content: "";
    font-family: FontAwesome;
    font-size: 14px;
}

The problem here is that, its not showing up because I think the css page is not able to process the character. Solution needed :/

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Couple of design questions

Post by Ange Tuteur on November 15th 2015, 11:21 pm

@Rhino.Freak that should work fine. Did you make sure that you included Font Awesome on the forum you're using ?

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Couple of design questions

Post by Rhino.Freak on November 16th 2015, 7:48 am

Yes I installed fontawesome :/ and I copied that content part from the cheatsheet.

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Couple of design questions

Post by SLGray on November 16th 2015, 8:08 am

Have you tried removing the default image?

I do not know if these are related to the issue, but here are the errors I get in my browser:
Firefox Console wrote:InvalidCharacterError: String contains an invalid character 99142.js:1:0
SyntaxError: expected expression, got '<' 13080.js:1:113
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.[Learn More] <unknown>
Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen.[Learn More] <unknown>
SyntaxError: unterminated regular expression literal freetest.forumotion.net:214:103
Use of document.createAttribute() is deprecated. Use element.setAttribute() instead. avs541.js:52:0
Use of setAttributeNode() is deprecated. Use setAttribute() instead. avs541.js:52:0
Use of getPreventDefault() is deprecated.  Use defaultPrevented instead.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35622
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Couple of design questions

Post by Rhino.Freak on November 16th 2015, 1:47 pm

@SLGray wrote:Have you tried removing the default image?

I do not know if these are related to the issue, but here are the errors I get in my browser:
Firefox Console wrote:InvalidCharacterError: String contains an invalid character 99142.js:1:0
SyntaxError: expected expression, got '<' 13080.js:1:113
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.[Learn More] <unknown>
Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen.[Learn More] <unknown>
SyntaxError: unterminated regular expression literal freetest.forumotion.net:214:103
Use of document.createAttribute() is deprecated. Use element.setAttribute() instead. avs541.js:52:0
Use of setAttributeNode() is deprecated. Use setAttribute() instead. avs541.js:52:0
Use of getPreventDefault() is deprecated.  Use defaultPrevented instead.

I doubt the errors are related. This is my test forum anyway and I'll simply export the theme into a whole different forum when I'm done.

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Couple of design questions

Post by Ange Tuteur on November 16th 2015, 3:33 pm

Actually, in the script you have the variables as :
Code:
  var FA = '{FA_CSS}',
  a = document.createElement('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');

but they should be :
Code:
  var FA = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css',
  a = document.createElement('LINK');

Code:
a
creates a
Code:
<link>
element which imports the stylesheet in the
Code:
FA
variable.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Couple of design questions

Post by Rhino.Freak on November 16th 2015, 6:01 pm

Argh! Stupid me >. < sorry lol
Yep that is solved! Thanks!

Can someone answer my other questions please?

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Couple of design questions

Post by Rhino.Freak on November 19th 2015, 6:41 am

Bump up!

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Couple of design questions

Post by Rhino.Freak on November 22nd 2015, 7:10 am

Broskis?

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Couple of design questions

Post by Rhino.Freak on November 23rd 2015, 12:55 pm

Guys I have another little question, forget about the previous ones, they aren't important.
http://prntscr.com/95ye53

As you can see, the toolbar contents have shifted a bit downwards in my forum. I don't know what CSS rule triggered that so can someone help me please?
Forum Link : http://freetest.forumotion.net/

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Couple of design questions

Post by Ange Tuteur on November 23rd 2015, 1:43 pm

Hi @Rhino.Freak,

Looking at it, it appears to be something related to the
Code:
line-height
or dimensions of the child elements. Think Regardless, try adding a negative margin to your share links to see if that changes the positioning :
Code:
#fa_share a {
  margin-top:-6px;
}


P.S.
Sorry for not being active. I took a break over the weekend to rest, so that I can get better. rambo

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Couple of design questions

Post by Rhino.Freak on November 23rd 2015, 5:27 pm

Yes I did tinker around with line height to kinda lower the height of the fa_right links.
Adjusting the margin did the trick! Thanks!

If you're active again, I'd like to ask this
@Rhino.Freak wrote:5. Does anyone know why the post author details part is made "p" in html? What If I edit my templates and make it a span instead?

Also take care! Very Happy

EDIT: Let me explain what I want, with <p> thingies, the width of the element is very large and extends throughout the page, while with <span> it stays as much as the content in it. Let me know if there's a solution with this just via CSS!

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Couple of design questions

Post by Ange Tuteur on November 24th 2015, 11:13 am

If you want, you can display that element as an
Code:
inline-block
:
Code:
p.author {
  display:inline-block;
}

Code:
<span>
is an inline element, and
Code:
<p>
is a block-level element. Blocks take up the whole line, and inline elements share the line with text and other inline elements.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Couple of design questions

Post by Rhino.Freak on November 24th 2015, 3:17 pm

Awesome! Works like a charm!
Thanks Ange! SolveD Smile

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Couple of design questions

Post by Ange Tuteur on November 24th 2015, 5:33 pm

You're welcome ^^

Topic archived

Have a good day. Beer

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum