My First Webflow Website

Hey Everyone,

Would love to get your honest feedback: http://www.miamipixel.com/

100% Made in Webflow.

BTW, if anyone can help me to get the #SwitchColor feature working, I would truly appreciate it.

Thank You All
:smile:

What are you trying to do with the #SwitchColor ?

Also cannot see projectā€¦ you didnā€™t provide a public link.

I like the simple layout and the use of Futura. Yeah not sure what youā€™re trying to do with #switchcolor.

Also the portfolio is a huge part of the page and honestly think that we would need to see something to really judge. :smile:

In general I imaging the site wouldnā€™t convert potential clients very well because there isnā€™t much content. Iā€™d work on that part to improve it the most.

Thanks for the feedback!!!

I am releasing a new update next week with more content. I also have 3 websites under development that will show up in the portfolio section soon.

By the #switchcolor, all I wanted to accomplish is that when someone clicks there, it will reload the website, and randomly change the background color. Thats allā€¦ Any idea how to get that going? It sounds simple, but I have no clue what to doā€¦

The site is now public:

http://miamipixel.webflow.com/
https://webflow.com/design/miamipixel?preview=7a6157215290d9044ce2bb9bd4cb848b

By the #switchcolor, all I wanted to accomplish is that when someone clicks there, it will re-load the website, and randomly change the background color of the main section. Thats allā€¦ Any idea how to get that going? It sounds simple, but I have no clue what to doā€¦

As far a reloading the siteā€¦ just link the site back to the index page.

When the user clicks on the linkā€¦ the site will reload.

The background color switching thing can be done with jquery.

Yes, i fixed the link, now its pointing to the right url.

Is jquery the same as something like this: http://chancejs.com/ ?

to be honest, i have no clue how to implement this, so any help is greatly appreciatedā€¦

Not trying to be rudeā€¦

You are creating a web design company

  • and you donā€™t know what jquery is ?

http://stackoverflow.com/questions/4283141/jquery-change-background-color

Its ok, i get your point, and I partially agree!. I just love the design aspect of web design, not the programming. I will have someone soon to take care of that part once I find the right match.

As for now, I only depend on webflow to design. I obviously have a lot to learn :smiley:

will check both links that you sent me. Thanks!

So I got to this: Edit fiddle - JSFiddle - Code Playground

and I all wanted is to find out the detailed steps to get that working in webflow for my siteā€¦

By no means is jquery a requirement for creating websites.

Many of usā€¦ on Webflow and elsewhere - started with simple HTML long before jquery was even thought of.

I hope you can find someone reliable - and experienced enough - to develop solid code for you.

In most cases Iā€™ve encountered, jquery is not required at all. Especially if you use Webflow and concentrate on simple / easy to use websites.

There are some good jquery developers here on Webflow.

Give a shout-out and Iā€™m sure someone will bellow back.

1 Like

In your projectā€¦ Custom Code section - add this code to your footer section:

<script type="text/javascript">
$( document ).ready(function() {
    $('.specbutton').click(function() {
         var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' 
                            + Math.floor(Math.random() * 255) + ','                            
                            + Math.floor(Math.random() * 255) + ')';
        $('body').css('background-color', color );
    });
});
</script>

See video: http://quick.as/4ZyqT9Q1

In the Designerā€¦ add a Text Linkā€¦ basically anywhere.

Give the link a class name of ā€œspecbuttonā€ without the quotesā€¦ and lowercase.

See video: http://quick.as/O4zoC6Q1

Export the code (it will not run the Designerā€¦ it will only work in run-time / live mode).

If your plan does not allow exportingā€¦ you will need to Publish your site instead.

If exporting - FTP the code to a your webserver.

Open the page in your browserā€¦ ie: Web Hosting, Domain Name Registration - MyDomain.com

Click the link several times.

See video: http://quick.as/RYwghvVP

Note: The code will only affect the body of your website.

If you have any sections or div that have a background color (ie: non-transparent)

  • the color will not show through them.

It will only affect the background property of the body element.

First of all, thanks so much for what you did. Explanation and videosā€¦ you are amazing!

I did all the steps and is not working, but my guess is that itā€™s probably its a small tweak awayā€¦

Right now, even after implementing those steps, is not changing any colors. But let me clarify, that all I need is to change the background color of the HERO section only, which is the first screen then see once landing in the site.

I have a class ā€˜heroā€™ to that section.

makes sense?

Thanks againā€¦ If it is too much, please disregard :blush:

your hero sectionā€¦ is actually called ā€œheroā€ - lowercased.

change this:

$('body').css('background-color', color );

to this:

$('.hero').css('background-color', color );

Make sure you use proper caseā€¦ and note the dot before ā€œheroā€.

Also for the link you dropped onto the page

Create the class name as ā€œspecbuttonā€ - no quotesā€¦ notice no dot.

The Designer assumes the dotā€¦ will insert the dot into the code for you.

In the custom code sectionā€¦ note the dot

$('.specbutton').click(function() {

.specbutton is not the same as Specbutton or .SpecButton

The dot is importantā€¦ as much so as case.

1 Like

Got it! makes senseā€¦

looks like itā€™s working now, yeahhh!

But when you click the button, it changes the color really quick, and reloads the site with the same blue background at the same time. how do we make it, so it sticks to the new color randomly picked?

Do you have an href on the link.

Ie: are you reloading the index page.

If so, the browser will always return to the original / default

Soā€¦ Remove the href. Thereā€™s no need to reload the page for this.

7:16pm in Miami and I cant express how happy I am to see this workingā€¦ @Revolution Thank You So Much!!! I owe you one!!! You went beyond what this forum supports hereā€¦ I appreciate thatā€¦ Weā€™ll be in touch.

1 Like